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

Posted by René Aoki
René Aoki
281 Points

having 1, 2 and 3 columns instead of 2 and 3 on media query

HI! on this example of the @media, I want to display 1column, on smartphones. 2 columns (min-width: 480px)

and 3 columns (min-width: 660px).

I have the following:

#gallery li {
float: left; width: 95%; margin: 2.5%; background-color: orange; }

this is to show only 1 column on smartphones

then for tablets I have

@media screen and (min-width: 480px) { #gallery li { width: 45%; } #gallery li:nth-child(3n) { clear: left; }
}

So far so good. but It does not changes to 3 columns

and I have this: @media screen and (min-width: 660px) { #gallery li { width: 28.33333%; } }

I know for sure this line is making the conflict

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

should I add to "660px" something like

gallery li:nth-child(3n) { clear: none } ???

@media screen and (min-width: 660px) { #gallery li:nth-child(3n) { clear: none } #gallery li { width: 28.33333%; } }

any advice?

Edmund Punongbayan
Edmund Punongbayan
12,117 Points

i got the same problem. and yes setting clear:none on 660px will do the job. this worked for me.

@media( min-width : 480px ){

header .cta-txt{
    font-size:1.5em;
}
header .cta-num{
    font-size:2em;
}
#circ-block li{
    width:100%;
    margin-bottom:20px;
}
#ss-gallery li{
    width:45%;
    margin:0 2.5% 10px;
}
#ss-gallery li:nth-child(3n){
    clear:left;
}

} @media( min-width : 980px ){ #ss-gallery li{ width:30.3333%; margin:0 1.5% 10px; } #ss-gallery li:nth-child(4n){ clear:left; } #ss-gallery li:nth-child(3n){ clear:none; } }