Streaming live at 10am (PST)

Extra width problem

Hello everyone!

I was working on my site, doing some last interactions before having a break. But when I published the site to have a last look at it before logging out, I noticed that my page was about 3 pixels too wide. I’ve checked everything, even put a Max Width of 100 vw on every sections and on the body, but I still get that extra width when I publish… It’s not there on the preview mode though.

Thanks for the help


Here is my site Read-Only: LINK and the publish site: LINK

Hey @Walter, which screen size are you having this problem with? Only see the extra with on tablet and below, but I assume thats just because you have not set it up yet.

Hey @dennyhartanto, I’ve only set up the site for desktop yet. I’ll make it responsive to other screen sizes when it will be done. And on my desktop view, the extra width is there.

Thanks for trying to help anyway!

No worries, would love to help but I don’t see the extra width :frowning:. I have tried scrolling left & right too.

It’s not there on preview mode, only on the live published version, unfortunately. The other way around wouldn’t have been such an issue :grin:

The screenshot shown is on the live published version.

Oh really ? I thought it was the preview mode’s handle on the right, my bad! Here’s a screenshot of what I get on my desktop.

Which browser are you using and have you tried other browsers? I have tried Safari and Chrome and its not showing on both.

I use Chrome and Firefox, both showing the extra width. That’s so weird… Let me reboot my pc, maybe that will be the charm :crossed_fingers:t6:

Nope, still got that extra width :grimacing:

I see you have added a Max-width, which comes into effect when you have overflowing Items. Have you tried adding a width: 100% to the sections?

Screen Shot 2020-06-01 at 16.23.02

I just did it and it changed nothing… I must be doomed with this extra width or something :roll_eyes:

Yikes, usually the extra width issues comes from having overflowing items. How bout you try adding overflow: hidden to all of the sections and see if its still the same?

It actually worked when I did it for the body but now I can’t scroll any more

You shouldn’t do it for the body, because that tells it to cut off anything below the first load.

Ok, I’ve tried no overflow on every section, one by one and it seems to be coming from my last section. But when I set it with no overflow, the Div inside is not sticky anymore :pensive:
And it doesn’t even make sense that this section is faulty because it’s been there for a while now and it didn’t go like that.

You can now undo the Overflow Hidden and try changing the Tabs width from 100VW to 100%. 100VW does not take the browser scrollbar into consideration. So your tabs may end up bigger than your 100% section.

Alright, it looks like that section was just randomly messing up. I deleted it, created a new one and put my content back in and everything went back to normal. But, cause that would just be too beautiful otherwise… I now have that thing where my Header box is somehow smaller than the actual text inside it, giving me that overlapping effect that I don’t want.

And that’s not the first time where I get a div or any container smaller than the actual content inside it.
Do you know what is causing that ?

Nevermind, I got it resolved. It was my line height that was too low!