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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Kris oi
Kris oi
4,910 Points

floating left and right to stacking

I made two columns...the code is #primary { width: 50%; float: left; } #secondary{ width: 40%; float: right; }

but when I make the browser window smaller the columns do not stack on top of each other like it does in the video with nick

2 Answers

Brodey Newman
Brodey Newman
10,962 Points

Hey Christopher,

Try removing the floats at a breakpoint like my code below.

@media screen and (max-width: 700px) {

   #primary  {
        float: none;
        width: 100%;
  }

  #secondary{
       float: none;
       width: 100%;
  }

}

Hope this helps!

Kris oi
Kris oi
4,910 Points

I think its my screen it can fit more pixels in a smaller space I adjust the screen min-width to 660 and it started off with two columns and stacked as I made the window smaller thanks for your help

Kris oi
Kris oi
4,910 Points

thanks Brodey, it helped me to stack the columns, but I wanted to make it so they were side by side when there was space and then to stack when the site was being seen on a smaller screen

Brodey Newman
Brodey Newman
10,962 Points

You will most likely have to play with the media query and get them to stack at exactly the right pixel. :)

You can do this by opening the dev inspector and resizing your browser. At the top of the screen you'll see the pixels as the screen gets smaller.