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

Posted by Irving Coronado
Irving Coronado
3,423 Points

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

Irina Blumenfeld
Irina Blumenfeld
9,198 Points

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%;
   }

}
Irving Coronado
Irving Coronado
3,423 Points

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

patrickbudhathoki1
.a{fill-rule:evenodd;}techdegree
patrickbudhathoki1
Front End Web Development Techdegree Student 19,369 Points

Thank you. has worked for me too.

Darius Loftis
Darius Loftis
12,851 Points
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.

Irving Coronado
Irving Coronado
3,423 Points

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!