Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Display Modes Column Layout with Inline-Block

Primary-content and secondary-content containers are not stacking when browser is minimized.

After adding the display: inline-block property to the .col selector rule set, I noticed that the .primary-content and .secondary-content containers were not stacking on top of each other when the browser was minimized past 786px (max-width value for media query).

I downloaded the project CSS file and compared it to my own CSS file. There weren't any obvious differences between each the files. Any help would be great!. My CSS file is as follows:

/* Page Styles
================================ */

body {
    font: normal 1.1em/1.5 sans-serif;
    color: #222;
    background-color: #edeff0;
}

/*.main-wrapper {
    width: 90%;
    margin: auto;
} */

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body,
.main-wrapper,
.col {
    height: 100%;
}

/* Layout Element Colors
================================ */

.main-header       { background-color: #384047; }
.main-logo         { background-color: #5fcf80; }
.main-nav li       { background-color: #3f8abf; }
.primary-content   { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer       { background-color: #b7c0c7; }

/* Header, Banner and Footer Layout
================================ */

.main-header {
    padding: 20px;
    display: table;
    width: 100%;
    min-height: 150px;
}

.main-logo, 
.main-nav,
.main-nav li {
    display: inline-block;
}

.main-logo, 
.main-nav {
    display: table-cell;
    vertical-align: middle;
}

.main-logo,
.main-nav li {
    border-radius: 5px;
}

.main-nav {
    padding-left: 50px;
}

.main-logo {
    width: 120px;
}

.main-nav li {
    margin-right: 10px;
}

.main-logo a, 
.main-nav a {
    color: white;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 10px 20px;
}

.main-footer {
    text-align: center;
    padding: 20px;
}

.main-banner {
    background: #ebedee;
    text-align: center;
    padding: 35px 15px;
}

/* Media Queries */
@media (max-width: 768px) {
    .main-logo,
    .main-nav,
    .main-nav li,
    .col {
        display: block;
        width: initial;
        margin: initial;
        height: initial;
    }

    .main-nav {
        padding-left: initial;
    }

    .main-nav li {
        margin-top: 15px;
    }

    .main-banner {
        display: none;
    }
}

/* Column Layout */

.col {
    display: inline-block;
    padding: 20px;
    margin-right: -5px;
    vertical-align: top;
}

.primary-content {
    width: 60%;
}

.secondary-content {
    width: 40%;
}

2 Answers

Try to include in your media query .primary-content and .secondary-content width: 100%

/* Media Queries */
@media (max-width: 768px) {
    .main-logo,
    .main-nav,
    .main-nav li,
    .col {
        display: block;
        width: initial;
        margin: initial;
        height: initial;
    }

    .main-nav {
        padding-left: initial;
    }

    .main-nav li {
        margin-top: 15px;
    }

    .main-banner {
        display: none;
    }

   .primary-content, 
   .secondary-content {
      width: 100%;
   }

}

That worked! Thanks for getting me out of this pickle!

Thank you. has worked for me too.

Darius Loftis
Darius Loftis
12,851 Points

Have you tried float left for mobile devices? Or you can try adding display block to the individual divs for mobile devices.

I haven't tried the float property for mobile devices. I guess I could add the float left within the media query for the .primary-content container. Thanks!