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

Naivedya Bansal
Naivedya Bansal
5,483 Points
Posted by Naivedya Bansal
Naivedya Bansal
5,483 Points

i want to apply the clear property to my two column layout too?where to put the code to make it specific fr screen<480px

i tried puttin it in main.css . /#gallery li:nth-child(2n+1) { clear: left; }/in page portfolio column but it gets applied to the three column layout too. how to go about it ?

Jacob Mishkin
Jacob Mishkin
23,118 Points

is this for the code challenge or just on your own?

also do you have a 3 column layout or a 2 column layout?

Naivedya Bansal
Naivedya Bansal
5,483 Points
Naivedya Bansal
Naivedya Bansal
5,483 Points

Jacob Mishkin , on my own . i have 3 column layout for the pc version and two column for mobile version. i applied the clear property in the 3 column layout as taught it in the lesson and want to extend it to the two column layout.

2 Answers

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

you can just add that style in your media query and you should be good to go.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Naivedya Bansal ,

You're on the right track with putting that css in main.css

All that you're missing now is that you need to set the clear property back to none for the 2 column items inside the media query before you set clear: left on the 3 column items. This will stop it from messing up your 3 column layout.

main.css:

#gallery li:nth-child(2n + 1) {
  clear: left;
}

responsive.css (within the 480px media query):

#gallery li:nth-child(2n + 1) {
    clear: none;
}

#gallery li:nth-child(3n + 1) {
    clear: left;
}