Image does not fill 100% of viewport on rotation change

Hi,

I am having a little issue when switching from mobile portrait to landscape view. My project images are supposed to always fill 100% width of the view-port. However, when I switch from portrait to landscape this does not happen. Though funnily enough if I load the site in landscape then switch to portrait it works.

Any help would be appreciated.

Many Thanks

Scott


Here is my public share link: https://preview.webflow.com/preview/scott-alex-watson-d8cd13?preview=226ee57b32799c9850116a932f37a60c

Hi,

Can anyone help?

Cheers

Scott

Hey @scottalexwatson,

Can you enable your public share link please?

Best,
Naweed

Hi Naweed,

Sorry I updated it.

https://preview.webflow.com/preview/scott-alex-watson-d8cd13?preview=da5d86402390e9b6754f1c3852d6f209

Many Thanks

Hi @scottalexwatson, thanks for the read-only link. I took a look, and while the section that the images are in is set to 100%, the images are set to auto, so the image is not set to 100% width yet.

I would set the images width to 100% on tablet and lower viewport:

Without the 100% set:

https://cl.ly/3c1N3X0a2g2I/Screen%20Recording%202017-05-06%20at%2009.04%20AM.mov

After setting the 100% width to the image style, and republish:

https://cl.ly/0k462W1O0C1b/Screen%20Recording%202017-05-06%20at%2009.06%20AM.mov

To avoid having to apply the 100% styling to all the different image classes, perhaps create one image class with the styling and apply that class to all images.

I hope this helps.

Hi Dave,

That’s great, many thanks for your help. All working now.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.