Streaming live at 10am (PST)

Ideajam.finstart.co

Hi.

The designer editor is showing that my page is responsive and all good. But when I am opening it on my phone in a chrome browser, it has a lot of white space when you scroll to the right. Try double-clicking f.ex to see what I mean.

ideajam.finstart.co (open it on your phone)

Can I please get some help on this? It looks fine in the designer editor(all devices)
Best regards, Hodo


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @hodoea, when posting a topic to the bugs category, please include a read-only link to the project you have an issue with.

A cursory inspection in chrome dev tools points to the background video element as the culprit for me.

Sorry, here is the read-only link: https://preview.webflow.com/preview/finstart-ideajam?utm_medium=preview_link&utm_source=dashboard&utm_content=finstart-ideajam&preview=a45f94f6640b12003e27dc36d3be8d71&mode=preview
I also figured out that the background video was the problem… But I don’t know where to place it in in the designer editor in order for it to not create this issue…

Hodo Elmi Aden
UX designer
hodo@finstart.co / (+47) 984 62 273

Finstart Nordic
finstart.co

There is a page in the Webflow University that I recommend you review if you haven’t.
It should help you resolve your issue.

If you are still stuck, let us know.

I am still stuck unfortunately. I think it may be related to this issue: https://forum.webflow.com/t/background-video-responsive-size/81825

Hodo Elmi Aden
UX designer
hodo@finstart.co / (+47) 984 62 273

Finstart Nordic
finstart.co

Hi @hodoea! John here. I was able to take a look at the website and noticed a few things that were causing the horizontal scrolling on the different layouts.

I’ve recorded a short video here to clarify: https://cl.ly/7611aaba36d5

There were a few elements that were going off the canvas on mobile landscape, and mobile portrait. On mobile landscape “section 3” seems to have quite a few elements that are placed to the far right. This was adjusted by setting the width of the “services wrapper” inside of “section 3” to 100%.

I also went over styling the background video so that it was not a small div with a width and height of 0.

Here are a few videos within the Webflow University I found helpful when using Flexbox: https://university.webflow.com/topic/design-layout-positioning-flexbox

Hope this helps!