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


(Nils Witte) #1

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


(Rob Beattie) #2

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


(Nils Witte) #3

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:


(Rob Beattie) #4

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


(Jannis from inStacks Software) #5

Use just a piece of custom CSS:

img {
max-width: 100%
}


(Nils Witte) #6

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.


(Jannis from inStacks Software) #7

Forgot to mention:

height: auto;


(Nils Witte) #8

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

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

Works perfect now!


(Rudy Trubitt) #9

Worked great for me too, thank you.