Which element is causing the horizontal scroll?

[Joanne Masterson]

Hi there
I’ve used WordPress-bootstrap theme to create a child theme here:
http://potentio.us

The problem is that there is a horizontal scrollbar when I shrink the site to 400px wide (to test for smartphones).

I can not for the life of me figure out which element is causing the horizontal scroll. There is none at the parent theme site:
http://320press.com/wpbs/

Can anyone shed any light?

I have been examining each division for hours and I don’t see it.

Thanks for any help.

Joanne

[Steven Crader]

Nothing immediately revealed itself as the problem. I did run it through the HTML Validator and it seems that there are some stray div tags that may or may not be closed at the right location. Here is the Validator output.

[Atelierbram]

There’s also this horizontal scrollbar on larger screen, apparently caused by the bootstrap negative left and right margin on .row, …

One thing you could do to eliminate potential causes is to remove a few stray </div> tags, ( easiest to use W3C’s validator to check on that ).

[Joanne Masterson]

Thanks everyone.

I saw the validation problems with the divs -fixed those!

What do you use to check 320-wide screens?

Thanks for your advice

Joanne

[Alan C]

Howdy,

Poking around if you remove the margin-right: -15px from both .row and .navbar-nav it fixes it right up for me on a 1600×900 screen. No scroll bar even as I size down.

.row is the major culprit that actually does like 90% of the fixing, as you size down you get a small bar but not at any recognized resolutions outside of 768 (so some tablets in portrait and computers from the 90s). The margin on .navbar-nav fixes the sizing down issue.

[Paulie_D]

What do you use to check 320-wide screens?

Chrome won’t reduce to that size BUT you can use Firefox (which will) or the Chrome Developer tools to emulate a screen that size.

TBH…I don’t think there are many devices that small these days. 480px generally seems to be the minimum.

[Senff]

What do you use to check 320-wide screens?

http://www.senff.com/front-end/you-already-have-a-retina-screen-emulator/

Chrome won’t reduce to that size BUT you can use Firefox (which will) or the Chrome Developer tools to emulate a screen that size.

Huh? Of course it does. The smallest window I can make with Chrome is 249 pixels wide.

[Paulie_D]

Huh? Of course it does. The smallest window I can make with Chrome is 249 pixels wide.

Hmmm…mine is c.500px

Aha…hid Bookmarks and Extension icons and that fixed it.

[Steven Crader]

You can also use the Mobile Emulation features of the Chrome Dev tools if you don’t want to keep resizing the actual window.

[chromium24]

@AlanD
Thank you for your help! By setting the margin-right to 0 for .row and .navbar worked perfectly. I’d tried other methods suggested and nothing worked until I found your solution.

[Author]

Posts