Bootstrap: Layout not responsive even while using correct classes

Question

I think I'm using the correct Bootstrap structure, classes, etc.. So why does the layout get totally messed up when I resize the browser? What am I doing wrong?

Here's the full code.

body {
    font-family: 'Roboto', sans-serif;
}
h2 {
    font-size: 32px;
    font-weight: bold;
}
h3 {
    font-size: 16px;
    font-weight: bold;
}
.container {
    max-width: 1056px;
}
p {
    font-size: 14px;
}
nav.navbar {
    padding: 12px;
    border-radius: 0;
    border: none;
    margin-bottom: 0;
    background: none;
}
nav.navbar li {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}
nav.navbar li a {
     padding: 8px 20px; 
     margin-top: 0.5em;
     border-radius: 4px;
}
nav.navbar li a:link {
    color: #9faeaf;
}
nav.navbar li a.active:link,
nav.navbar li a.active:visited {
    color: #fff;
}

@jonju But I have to, to customize the site and design the layout. — Sam, Aug 06 '16 at 19:31
Questions have to be self-contained. Please add the HTML to the question too. — JJJ, Aug 06 '16 at 19:34
@Sam, go through the CSS and HTML and only keep the [bare minimum code required for someone else to replicate the issue](http://stackoverflow.com/help/mcve). You will then be able to post both your HTML and CSS code parts. — Martin, Aug 06 '16 at 20:05

Yuri · Accepted Answer · 2016-08-06T20:14:45.353

The primary reason your layout is not responsive is because you've set explicit height rules in your CSS. Take section#about, for example—if you remove the explicit height: 980px; you set in your stylesheet, the Pixel Perfect paragraph will no longer overlap with the Looking for the perfect template to use? title.

Second, you are improperly using the Bootstrap grid. I noticed that you have a .container class for almost every section. Ideally, you should remove those and only have one .container class which encapsulates the entire page (unless you want to use different container sizes on one page).

Here is an example:

<body>
    <div class="container">
        <section id="intro" class="row">
            <div class="col-md-4">
            </div><!-- end .col-md-4 -->

            <div class="col-md-4">
            </div><!-- end .col-md-4 -->

            <div class="col-md-4">
            </div><!-- end .col-md-4 -->
        </section><!-- end #intro section -->

        <section id="about" class="row">
            <div class="col-md-6">
            </div><!-- end .col-md-6 -->

            <div class="col-md-6">
            </div><!-- end .col-md-6 -->
        </section><!-- end #about section -->
    </div><!-- end .container -->
</body>

Note: There is an exception with the Navbar/Footer, in which case you can put separate containers inside those elements as you already did with the Navbar.

Third, use more .row classes as "blocks" for each vertical section on your page. You did this within your sections, but it might be a good idea to make the sections themselves individual rows as well by giving them the .row class—after you've removed the containers from each section.

Next, you don't need to define rules for every screen size as kosmastsk suggested. If you like the way it looks with just defining breakpoints for col-sm then that is up to you. It will look better, though, if you develop mobile first and work your way up to larger screen sizes.

Also consider using more CSS Media Queries to help you better customize your site if you must override heights, widths, etc.

Thanks for taking the time. btw I did wrap a single container around everything at first but then I couldn't do the full-width backgrounds. Is there a way to work around that? — Sam, Aug 07 '16 at 05:55
In that case, wrap everything in a `.container-fluid` class and override Bootstrap's CSS to remove the padding from `.container-fluid` so everything will take up the full-width of the viewport. After that, you could have full-width backgrounds but your content (text) would be full-width as well. To get around that, I would use bootstrap columns to act as smaller containers (e.g. `.col-xs-10`) and [center that column](http://stackoverflow.com/a/18153551/5228504). That way, you would still be able to use `.row` and more column classes within it as you would in a regular `.container` class. — Yuri, Aug 08 '16 at 17:11

score 0 · Answer 2 · answered Aug 06 '16 at 19:31

0

In your html code, you have only used col-sm-*. So, the browser uses your structure for the .sm, .md and .lg classes but does not know what to do for the .xs class (<768 px). So, try defining the xs class first. For example, use that code for every div

<div class="col-xs-12 col-sm-4"> ... </div>

answered Aug 06 '16 at 19:31

kosmastsk

67
2
10

Still totally messed up. – Sam Aug 06 '16 at 19:35
[check this out](http://codepen.io/kosmastsk/pen/OXBYqA) Isn't it better? I would advice you to start developing with the .xs class first. Bootstrap makes it easier for you this way – kosmastsk Aug 06 '16 at 19:43

Bootstrap: Layout not responsive even while using correct classes

2 Answers2