Community forum for knowledge and support

Updated last year

Building Out My First Site in Relume and Webflow and Having Some Issues with Responsiveness

At a glance

The community member is building their first website using Relume and Webflow and is experiencing issues with responsiveness, particularly with the navigation bar and hero section. The community members discuss various solutions, such as setting overflow:hidden on the hero section, adjusting the positioning and width of the hero image, and using the Finsweet extension to simulate a landscape device. While some of the suggestions help, the community members are still left with white space on the left and right sides in mobile landscape mode, which is a known issue with WebKit on iOS. The community members also note that the Webflow preview does not accurately reflect the mobile landscape layout, making it difficult to reconcile the spacing issues.

Building out my first site in Relume and Webflow and having some issues with responsiveness.

On my desktop at 428px breakpoint (iphone 13 pro max etc) it looks as expected in the nav bar. On my actual phone however the navbar right menu is pushed towards the centre and overall the spacing is out. Any ideas

J
G
15 comments

Think it's an issue with that hero, rather than the nav. Try setting overflow to hidden on the hero section.

Thanks for your help, that worked πŸ™‚

It actually still appears to be a problem in mobile landscape as per the image. The background image wrapper is set to hide overflow and the image to fill while the position is absolute.

As you can also see from the image the background does not fill the entire canvas in mobile landscape

I'm actually not seeing that happen

I ran it in incognito mode and what I see on my actual mobile is a gap on the left and expanding out to the right so that you can swipe the image

Sounds like overflow:hidden needs to be on a higher level element. Try it on the section element.

Hidden on the 'section_header5', adding-global, container-large and header5_background-image-wrapper as well as the image itself but same result

Not sure what else to do- fwiw, it's still all good on incognito for me, no horizontal scrolling

Thanks, I have managed to get rid of the scrolling but now left with white on the left and right in mobile landscape only

Ah yeah, that's just what WebKit does on iOS I believe

Ah thanks, at least it’s not something I am doing then? Is there a way to push the hero image to the right in mobile landscape, not sure if padding would work here?

Is it also common for webflow not not reflect a mobile landscape preview? The preview for example is in portrait so its hard to reconcile spacing

Since the image is absolute, you could always set the width to something like 120vw and play with the positioning a bit to center it up on landscape.

It is a bit annoying that Webflow only adjusts width - if I recall, the Finsweet extension allows you to adjust the height of the screen as well, so you can simulate a short, wide landscape device

Actually, not sure you can get any content on those white bars, even if you set a larger image size. But, traffic from mobile landscape devices is usually super minimal

Add a reply
Sign up and join the conversation on Slack