I have some weird CSS issue that I’m having the worst time locating. Something on the page (or in the css) is causing the page to allow for horizontal scrolling. I’ve tried pulling off individual sections of the site and it’s always there. Any ideas what it is?
here is a link to the dev http://phiaconcepts.devlocation.site
It looks to be the negative margins on .row.
That has to remain as its a bootstrap construct for the bootstrap grid.
The issue is that .row is not nested inside .container as that is lesson one in the bootstrap framework
Columns must be inside a row parent and a row must be inside a container parent.
The container has 15px horizontal padding that soaks up the -15px negative margins on .row which is the basis for the gutter system in bootstrap. It’s how the grid works and must be followed precisely.
You can only over-ride if you understand the consequences but you should of course never change the default bootstrap classes.
The following will correct your errors but is a bit of a blunt instrument.
.fixed-top .row{
padding-left:0;
padding-right:0;
}
footer.dBlue-bg,
main section {
padding-left:15px;
padding-right:15px;
}
It would have been better to ensure that any rows are contained within a container class and then any content is contained within a column class. If you have sections where you really don’t want the grid then just write your own classes and html and don’t use the grid constructs.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.