Site Layout Compromised on Mobile Devices

Hi all,

Happy New Year! I didn’t think I’d ever have to go as for as to post a call for help :(. That’s a testimony to Webflow’s streamlined UX and intuitiveness. My issue is simple, the site i’m working is responsive across all devices in the designer & preview mode. When I visit the published site via my mobile device, a centered container on the home page becomes disfigured. It takes up the full length of my hero image. I’ve just about tried everything to no avail. I’ve shared the appropriate links below to provide more context on the issue.


Here is my site Read-Only: Webflow - River View Partners

Published site: river-view-partners.webflow.com

I don’t think I’m clear about which container you are talking about. Can you please share the screenshot of the exact element? Or mention the class name or what content is there?

I do see responsive issue on your hero section, it is not responsive on smaller screen. And content where there is gradient background is overflowing. You are using fixed width and height which is not really recommended. Please check the screenshot below:

Hi there, thank you for you response! You can visit the following link on mobile devices to view the issue: river-view-partners.webflow.com

The element only appears broken on the published site, ‘centered container 4’

This is what I’m getting on my phone. I’m not really sure what is broken in your view. If you would have shared the screenshot of that broken view, that might make sense to me.

I did mentioned about the centered container 4 block issue. I didn’t get any response on that. Is that not the issue?

Abirana,

I believe I addressed the responsiveness issue you mentioned but here’s what I’m seeing on my end:

This is strange that this issue is specific to iOS devices. I inspected your site on my iPad then only I saw the issue.

You’ve set 20% height, min-height, max-height on those elements through style panel and then you must have written custom CSS to overwrite with

media screen and (max-width: 479px) {
  .div-block-29 {  
      width: 100%;
      height: auto;
      max-height: none;
      max-width: none;
      min-height: auto;
      min-width: auto;
  }
}

Because media screen is mentioned this is not affecting iPhone and iPad.

But the main thing is why do you need height no that DIV and then you are using %, which makes it relative to its parent. You could have just used padding or margin but not in %.

Please try removing height properties from all viewpoints and see if that works.

I can see many things that is done extra which are unnecessary and makes it messy.