Hi there
So according to Webflow, styles are inherited from the 1070px screen size and it affects every screen size below it. What has been happening with this project I have been building is that the 320px screen size overrides all the higher screen sizes (specific elements such as pictures).
When I start from mobile (320px) to laptop size (1070px) it works but when I go to another page and come back the 428px screen size (iphone pro Max) start changing the styles downwards.
This is extremely infuriating, I’m beyond angry at this point, I’m late because of this issue and I have been working in cycles for days. How do I fix this issue? Any help will be appreciated.
That’s suppose to be the case but that has not been the case in my experience. I know what I am talking about.
I first designed the laptop version of the site and I worked my way down. When I get to 320px, the changes I make there affect the laptop version.
I saw this with my own eyes. E.g. the hero image I adjusted in 320px ends up affects the one on top (laptop version) and becomes the same size as the one I set in 320px.
Like I said this seems to be happening to specific elements (image and section height to be more specific)
Hi @Khanya thanks for your info. Styles cascade from desktop to mobile portrait, if a style is set at mobile portrait it should not affect the higher viewports.
Element Settings are global, they affect all views, so the image width in image element settings will affect all viewports. Are you trying to set the setting in the settings tab for the image, or are you using a class?
Would it be possible for you to help share a screenshot of the affected image you are referring? When I took a look on the home page, I see a hero image of a Woman with the width set to 100% on all viewports but mobile where it is set to Auto.
Screenshot or screencast that helps to give a visual description. Here are some good tools: Loom, Cloudapp
So after I re-adjusted the size of the brand images in 320px, and as you can see with the other picture (1070px) the brand images are the same size as the ones in 320px. Maybe I’m resizing the images in a wrong way. When I set the sizes for those brand images I was resizing them by just dragging and readjusting the images using that small box at the corner of the image and I was not really setting the width with a class, so maybe that might be the issue here.
With other image (hero-image, the lady) I think I figured out what I have been doing wrong. What’s actually been happening is that the hero-section height that I set on the 428px size affected everything downwards (which was is suppose to happen like you guys have been saying, and what made it seem like this was not happening is because of the height I set for hero-section’s child container, and the child columns. I forgot to change those ones, so now I just set heights for the child elements of the hero-section to auto).
So now what I’m trying to do is to readjust the height of hero-section from 428px downwards for every device up until 320px. But what seems to be happening is that after I have set the height for the hero-section for 428px, when I set the hero-section’s height for 414px and for the other screen sizes going down, they get override by the height I set in 428px. I’m doing this so that the hero image sits right at the end of the hero-section. Any pointers on what I could be doing wrong here.
Thanks again for actually trying to break down the issue and help me out.
and I was not really setting the width with a class, so maybe that might be the issue here.