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
Edson Mendieta
698 PointsTwo column layout not stacking?
I have the same code and CSS as Nick has but when my I reduce my screen width to it's smallest size, the primary and secondary sections are not stacking.
Mind you, they don't look bad. You can see everything perfectly, however, they are floated to the left & right instead of being stacked like in Nick's example.
HTML
<div id="wrapper">
<section id="primary">
<h3>General Information</h3>
<p>I am currently looking for new design work. If you have any questions, please don't hesitate to contact me!</p>
<p>Please only use phone contact for urgent inquiries. Otherwise, email and Facebook are the best way to reach me.</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555-6425">555-6425</a></li>
<li class"mail"><a href="mail-to:emendieta@example.com">emendieta@example.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=SpaceneedleB</>">@SpaceneedleB</a></li>
</ul>
</section>
Main CSS
/**************** Page: CONTACT *****************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
li.phone a {
background-image: url('../img/phone.png');
}
li.mail a {
background-image: url('../img/mail.png');
}
li.twitter a {
background-image: url('../img/twitter.png');
}
**Responsive CSS**
@media screen and (min-width: 480px) {
}
/************************************ Two COLUMN LAYOUT ************************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
@media screen and (min-width: 660px) {
}
Nijad Kifayeh
6,092 Pointscan you add your code so we can see what's going on?
Edson Mendieta
698 PointsFound my mistake. I had accidentally deleted the closing curly brace of the first media query, thus, my responsive css was overriding the main css.
Thanks for being willing to help!
Dustin Whitworth
1,037 PointsI did the same thing here. Thanks for the fix!
Chris Brown
1,923 PointsI, too forgot to place my primary and secondary ids within the brackets of the initial breakpoint id...It's been a hard day for coding...but worth it once you figure it out.
1 Answer
Luke DePass
6,843 PointsHi Edson,
If you would like your columns to be stacked as the screen size is reduced you will need to "un-float" them with a media query like this:
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
@media screen and (max-width: 660px) {
#primary, #secondary {
width: 100%;
float: none;
}
}
You can change that max-width to whatever you think looks best.
Hope this helps!
Edson Mendieta
698 PointsEdson Mendieta
698 PointsIs it something related to the cascading nature of CSS? In other words, is my main.css being overridden by my responsive CSS?