Streaming live at 10am (PST)

Weird Horizontal Overflow Issue


#1

I’m having issues with the horizontal overflow for this site.

I’ve rebuilt this 3 times now and I’m not sure if its me or if it’s some sort of bug (probably me).

I’ve tried combinations of sections, removed sections, ect. but seem to be getting nowhere and my deadline is closing in.

Can anyone see what I’m missing?


https://preview.webflow.com/preview/nanoramic-laboratories?utm_source=nanoramic-laboratories&preview=f9e05521684abe9ba2edd908104b3bea

http://nanoramic-laboratories.webflow.io/


#2

For mobile? the feature-nav element should have overflow:hidden, and you should change properties of the text inside for each breakpoint.


#3

Hi Vincent, I haven’t started with mobile, it’s only on desktop.

In the designer preview it looks perfect but when I publish it has this issue.

Just tried overflow:hidden and seem to have the same issue.

Has this weird gap when published.


#4

I don’t have this issue on my browsers (mac)


#5

I’ve tried on chrome, IE and edge. Get the same result, you’d need to move the horizontal scroll bar to the left to see the gap.

Could this be a bug?


#6

Hi,

Looked at your problem think i fixed it :slight_smile:

To check if you have elements that are wider than your page.

I always add “scroll” on the body element if you dont have to wide elements your horizontal scroll will only be visible but can’t be used.

So when its possible to use the horizontal scroll bar i just keep deleting elements until you see the horizontal scrollbar become unusable, Then that is the element you need to fix :slight_smile:

On your “hero-section” i changed the 100vw to 100% this seemed to work, hope this works for you.

I also added a screen capture :slight_smile:

Gr Argo


#7

To add to this, using 100vw is a common mistake - the width of the viewport takes into consideration your whole window real estate. Including the scrollbar. Therefore an element of a 100vw will take the whole width of the window even if the scrollbar makes this window technically narrower. Using 100% will take the scroll element into consideration when determining the available width.


#8

Yea i had this problem myself so i just asked my wife(she is a coder) to explained it to me was bugging me for a long time. And had to fix this a few times but actually, didnt know what i was doing wrong so yay now i finally get it.

But what kind of feature of site would you need the vw for? instead of the 100%?

Googled it :stuck_out_tongue: https://teamtreehouse.com/community/viewport-units-vs-percentages helped me alot


#9

It worked!

Yes that really helped, much appreciated.

Can’t believe that it was that simple :smiley: