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
Kris oi
4,910 Pointsfloating 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
10,962 PointsHey 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
4,910 Pointsthanks 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
10,962 PointsYou 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.
Kris oi
4,910 PointsKris oi
4,910 PointsI 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