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 CSS Layout Basics CSS Layout Project Column Layout with Media Queries

Posted by kingsley Emeka
.a{fill-rule:evenodd;}techdegree seal-36
kingsley Emeka
Full Stack JavaScript Techdegree Graduate 18,238 Points

3 columns on same line

On large device, (min-width:1025px) The secondary, primary and tertiary content all appear on the same line(not stacked on top of each other) how was this achieved?

1 Answer

Mark Ramos
Mark Ramos
19,209 Points
Mark Ramos
Mark Ramos
19,209 Points

At the beginning of the video, Guil floats the columns so they appear side-by-side. Remember that @media (min-width: 769px) also applies to @media (min-width: 1025px) except where styles have been overridden. In @media (min-width: 769px) he gives .primary and .secondary a width of 50% to make them fit on one line, and in @media (min-width: 1025px) he overrides those widths by giving all 3 columns a width equaling 100% to fit on one line.

kingsley Emeka
.a{fill-rule:evenodd;}techdegree seal-36
kingsley Emeka
Full Stack JavaScript Techdegree Graduate 18,238 Points

Thanks.