Webpage larger than screen, not sure why

Hi. I’m finishing up a responsive website in Pinegrow, and just noticed that the webpage is larger than the browser window, resulting in a horizontal scroll bar at the bottom of the browser (at all screen sizes)… and I’m not sure why.

The Container tag has no attributes, aside from a Bootstrap mt-5 to push it down a touch), and the Body tag only has a Position:Relative attribute.

I tried disabling those, just to see if that helped, but those are not the factors.

Any idea what might cause this? Or, something I can ADD to remedy it?

hi @ladlon -
There are a couple of things that could cause horizontal overflow. Without looking at the page it is hard to tell.
One fix might be changing your “.container” to “container-fluid”.
If all else fails you can add “html,body{overflow-x: hidden;}”. Just make sure this doesn’t result in something on your page being cut off.
If you are still having problems provide a link to the code - put it on github or similiar and I’ll take a look.

Hi, RobM. Ya, I’m puzzled what is causing it, as I’m not adding any additional padding/margin, and I’d assume that even if the elements (images/text) within my Boostrap columns are responsible, they would be rearranged and shrunk as needed within each column. So, I’m really confused.

I’ll try making the container fluid, but I have to consider if that will affect any other aspect of it. The hidden overflow is a good idea, and I think that should be harmless, since nothing is currently getting clipped as it is (which further confuses me why the scroll bars are appearing… unless there’s some additional padding causing that, as there is visibly nothing that is actually pushing past the monitor screen borders.

I’ll have to look into it further, and will post again here if I have anything new to mention. Thanks!

UPDATE: One thing that MIGHT be causing it… maybe… is that I have a Position:Fixed ‘Back To Top’ button element which floats in the top left corner of the screen, independent of the rest of the page. Maybe that is pushing the container and/or body a bit? I’ll remove it, and see if the page size fixes itself.

It’s wierd… The section of the page that IS on the screen (when the horizontal scroll bar is positioned to the left) IS actually centered… so whatever ‘extra’ screen is causing the scroll bar to appear, it is ADDITIONAL to the intended size, and stuck on the RIGHT side of the page. If the browser DID show the whole (existing) page, the content would actually not be centered, but shifted over to the left. The extra screen space is something tacked onto the right side of the (proper) page.

Even the items (DIV background colours, etc) that span across the page stop where the extra screen area starts, leaving that whole vertical strip empty of any content… So, I guess the container is the right size, but the body has some extra space added to the right of it?.. like a right padding? (There’s no coding to cause that, but that appears to be what is happening…)

Hrmmm… I looked into it a bit, and I’m still puzzled. I went through and hid each section (Row>Columns sections), until the scroll bar disappeared.

It seems that it is caused by things like (for example) my Bootstrap columns (even when completely empty of content) with a size of 8 and an offset of 2 in the MD size. This should be an exceptable setting (single column, not stretching all the way across the screen… the sum of the numbers not exceeding 12)… yet it appears to be (at least one of) the things causing the body to stretch an extra bit more to the right (…I verified that it is in fact the BODY that is being stretched to the right).

I tried the Fluid idea, but that didn’t appear to work/help. I have yet to try the hidden idea. I’m sure that will work, but I would preferably remove the unintended extension, if possible. But, it’s definitly going to be my final solution, if I can’t do that.

That is a tough one to diagnose without seeing the code. A little like fixing a car over the phone.
I find that the developer’s tools window helps a lot in these cases. You scroll through the code, find the area that is overflowing and then check the margin, padding, display… for anything causing the overflow.
Good Luck!

1 Like

Oh, for sure. I’m not expecting anyone to tell me why my particular code is doing this… just hoping for some info on what (in general) could cause this sort of thing, just in case it’s not something I have already considered.

The obvious things would be specific padding/margin tags on these items… but they all seem clear of these.

What is the developer’s tools window? I haven’t noticed that.

From Pinegrow you right-click on the pinecone at the upper left. Then click on “Inspect”. The select element icon in the upper left can bring you to the area of the page where your code is being put together.
Most (all?) browsers also have development tools, it just depends on which one you are using how to bring them up.

1 Like

Oh NEAT!! Well, that’s a fun littlle hidden thing!

Ya, you’re right… That reminds me of the browser inspect feature.

Actually, today I’ve been poking around Pinegrow (as well as searching for more vids), as I’ve always been suspicious that I have not been aware of some of the features/tools in there.

Okay, cool… another toy to play with. Thanks!

Pinegrow is built on the Chromium engine, so it has many of the same tools as Chrome.

UPDATE: For the sake of anyone following along, and curious about this, I did figure it out soon after my previous post. Turns out, I had one div or something outside of the container… kind of an easy mistake when you construct things via the heirarchy/stack panel (…the panel on the far right of the screen). A simple lack of enough indent, and you’ve got some overhang happening! Problem solved, though…