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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Edson Mendieta
Edson Mendieta
698 Points

Two 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) {

}
Edson Mendieta
Edson Mendieta
698 Points

Is it something related to the cascading nature of CSS? In other words, is my main.css being overridden by my responsive CSS?

can you add your code so we can see what's going on?

Edson Mendieta
Edson Mendieta
698 Points

Found 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
Dustin Whitworth
1,037 Points

I did the same thing here. Thanks for the fix!

Chris Brown
Chris Brown
1,923 Points

I, 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
Luke DePass
6,843 Points

Hi 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!