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 trialIrving Coronado
3,423 PointsPrimary-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
9,198 PointsTry 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%;
}
}
Darius Loftis
12,851 PointsHave you tried float left for mobile devices? Or you can try adding display block to the individual divs for mobile devices.
Irving Coronado
3,423 PointsI 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!
Irving Coronado
3,423 PointsIrving Coronado
3,423 PointsThat worked! Thanks for getting me out of this pickle!
patrickbudhathoki1
Front End Web Development Techdegree Student 19,369 Pointspatrickbudhathoki1
Front End Web Development Techdegree Student 19,369 PointsThank you. has worked for me too.