Streaming live at 10am (PST)

Image does not fill 100% of viewport on rotation change


#1

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


#2

Hi,

Can anyone help?

Cheers

Scott


#3

Hey @scottalexwatson,

Can you enable your public share link please?

Best,
Naweed


#4

Hi Naweed,

Sorry I updated it.

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

Many Thanks


#5

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:

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

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.


#6

Hi Dave,

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


#7

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