CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
66h3m3ab
66h3m3ab

Reputation: 1148

Bootstrap container too wide

Quite simple problem; bootstrap container inside navbar is too wide, causing a horizontal scrollbar as it expands the body.

The page in question can be found here, the theme it's built on is this one.

What baffles me is that the CSS for both seems to be equal and the computed values Chrome dev tools return are the same. Would be awesome if someone would be able to find the issue.

Upvotes: 5

Views: 7056

Answers (2)

Paul Nowak
Paul Nowak

Reputation: 131

Current accepted answer seams to be spot on (look for .row with not .container around it).

However looking for it manually can be slow, so here's super quick&dirty jQuery script to run in the console: 

$.each($('.row'), function (key, value) {
    if (!($(this).parent().hasClass('container') || $(this).parent().hasClass('container-fluid'))) {
        console.log('Check .row ' + key);
        console.log( $(this) );
    }
});

It will return few .row IDs and preview

[Log] Check .row 14
[Log] w [<div class="row">] (1)
[Log] Check .row 16
[Log] w [<div class="row">] (1)

Just expand the node in the console and easily identify which one is the offending party.

Upvotes: 1

66h3m3ab
66h3m3ab

Reputation: 1148

Found the answer: A .row with no .container around it caused it

Upvotes: 9

Related Questions