Adjust image size in styled text page for full width and iPhone?

Hi there,

I am new to this and I have one specific question:

Is it possible to have an Image in a styled text sheet that is automatically being resized when viewed on a smartphone so that no matter what device somebody uses to watch my site they will always see the full picture? I use RW7 and the voyager-theme.

That would be so great! Thanks in advance for your tips!

Nils

If the Voyager theme is responsive (I don’t have it, I’m afraid) then you should be able to drag and drop your image into a Styled Text page and the theme will take care of re-sizing the picture so that it works well on different sized screens.

Rob

Well, unfortunately I guess, that is exactly what the problem seems to be: everything else shows responsive behavior except for the Image in the styled text sheet.

:pray:t2:

OK, this rang a bell and as is sometimes the case, a quick search in the forum brought up this thread.

Have a read and see if that helps.

Rob

Use just a piece of custom CSS:

img {
max-width: 100%
}

Quite good, thanks, but this just shrinks the image horizontally so it gets totally distorted. If there is a similarly simple way to truly rescale the image keeping the ratio of width and height, that would exactly solve my problem.

Forgot to mention:

height: auto;

2 Likes

Excellent! There we go! This is it! Thank you so much!

img {max-width: 100%}
img {height: auto}

Works perfect now!

2 Likes

Worked great for me too, thank you.