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 Laurence kite
Laurence kite
11,768 Points

best city guide and media queries

I tried to solve the layout problem for two and three column layouts with media queries.. and got stuck.. and found solution from the videos..

My layout is different and I notice if you mention the third column in the two col (layout) with one full length col below it the big screen layout duplicates the third col below even thought i tell it to float all three to the left...

The only way around it is to explicitly re mention the column by name in the third 3 col layout and forcing a float to the right and to move it up from sitting below using a clear none rule..

Like this @media (min-width:1025px){

.midcontainer{
    width:80%;
    max-width: 1150px;
    margin: 0 auto;
}
.primary {
  width:40%;
}
.secondary,
.tertiary {
  width: 30%;
}
.col {
    float:left;
}
.tertiary {
    margin-top:25px;
    float:right;
    clear:none;
}

}

unlesss i put in the .tertiary rule, the rule .col float left does not work and it keeps the third col below it as for the smaller screen