Streaming live at 10am (PST)

Broken Scrollbar and Broken Content Width

Hello everyone,

My website I’m currently working on was working great just last week. The content fit inside the page and adjusted without problems. Today I logged on to continue working on it and somehow the scrolling system and width/height system broke.

I created the website to scale without responsiveness but it seems that I have some overflow going on. I’ve triple checked overflow, deleted things, moved things around, but I can’t figure out the reason for the broken right side.

The scrollbar then covers up the content once expanded past a certain point cutting off the borders I set and creating horizontal scroll (if enabled).

The website looks fine in preview mode.
Any help would be appreciated, I’ve been going about trying to fix it the whole day.

Here’s the site: Webflow - Portfolio Site

I’ve been using the Project 1 page to test the problem.

https://portfolio-site-5ce648.webflow.io/project-1

I’m currently using a 4K laptop so my screen size is large.

Just to confirm, you’re looking to have the website take up the full height of the browser to prevent the scrollbar from appearing?

If that’s the case, I’d recommend using dynamic VH units for your sections and make sure that all the sections add up to 100—this way your site remains full height regardless of the browser size. Right now it looks like it would work on the exact browser size you designed it for, but other users with different display sizes would see something different.

Just as an example, on your project I made the header 13vh (and your logo font size 15vh), the title and footer marquee 5vh, and the main content area 27vh (along with making sure that internal content was set to 100% height to make sure it fills the full height and changing your logo font to VH) and your design works fairly well no matter what variation of size I scale it to:

responsive-design-colin

Let me know if you’ve got any questions (or you’re having a different issue) and I’d be happy to take another look :+1:

Thanks for the quick response! I suppose I wasn’t too clear on the problem but I appreciate the advice with the height values. I was looking more to remove the horizontal scroll bar and the problems with the screen getting cutoff like it is in this photo.

Some elements stop where I want them too but others extend about the width of the scrollbar past the edge of the page, especially at larger dimensions. Is there something wrong with how I setup the scaling in my project? It seems like the grid elements I setup may be broken or something.

Ah okay, thanks for the clarification. I took a peek at your original post and didn’t see any images of horizontal scroll so I assumed this was just for vertical scrolling.

When I test the site I’m not seeing any horizontal scrolling on my end (or at least, I am not able to replicate it) so I can’t take a closer peek at the different lengths shown in your most recent screenshot. Do you have a live link and browser size where that shows up (or maybe a page in the Designer) where I can see the example specifically?

My only thought without any context is that you’re using 100VW for full-width elements and that doesn’t take into account the horizontal scrollbar width—meaning if you see the scroll bar and trying to render 100VW, the browser will give you ~10px of overflow horizontally. A good rule of thumb is to use VH for height and % for width.

Hopefully that helps but I’d be happy to take a closer peek if you can give me an idea where you’re seeing the problem.

Thanks for the advice! Here’s a couple of quick snips of me playing around with some values at my screen size. No matter what pixel width I put the Designer at the horizontal scroll is still there. You’re probably correct about the width, I just have to find what’s broken with the grids or elements I’m using that’s throwing it off.

Here’s some examples of changing width from Auto to a different value…




Here’s what my screen looks like at different sizes. My browser size is 1536x763.



I appreciate the input, I’ll continue looking for the width problems.

Thanks for the extra details and screenshots!

The issue is how you’ve setup the sizing on your grid element. You’ll want to use a different unit type on these width values—right now you’re setting things in EM (20EM/60EM/20EM), but widths of inner elements should be using %:

If you modify your other grids to use their own % values (adding up to 100 in any amount) you should see much more consistent results :+1:

2 Likes

Wow, what a simple fix thanks for the help! I’m not sure why the EM wasn’t working but I’ll start using % for the width more often! I appreciate the quick replies.

Glad I could help out :tada:

EM is by no means a bad way to size the width of elements—but if you’re trying to relate the width of an element to your browser window the best method is always going to be percentage.

Good luck on the rest of the project :metal: