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 Unused CSS Stages Flexbox and Multi-Column Layout Multi-Column Layout

Charlie Prator
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Charlie Prator
Front End Web Development Techdegree Graduate 19,854 Points
Posted by Charlie Prator
.a{fill-rule:evenodd;}techdegree seal-36
Charlie Prator
Front End Web Development Techdegree Graduate 19,854 Points

Do we still need media queries when we're using multi-column layouts?

While going through the muli-column layout series in CSS Fundamentals, I was seeing our div re-size columns as if we had defined breakpoints through media queries. The problem is we never did write out any breakpoints, the -webkit-column properties beautifully did that for us.

So, does that mean we still should write in media queries?

4 Answers

Andres Aguero
Andres Aguero
30,545 Points
Andres Aguero
Andres Aguero
30,545 Points

Yes, Media Queries is a way to let the browser know that if the size of the screen is between the media query you specified then the page should display with all the media queries css styles you apply to it. If media query was not specified then you would not see the effect on mobile devices

Charlie Prator
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Charlie Prator
Front End Web Development Techdegree Graduate 19,854 Points
Charlie Prator
.a{fill-rule:evenodd;}techdegree seal-36
Charlie Prator
Front End Web Development Techdegree Graduate 19,854 Points

I see.

So, what you're also saying is that we can't rely on multi-column layouts to dictate how we render our content on various viewports. Sometimes we use Media Queries to be explicit.

Emanuel Azzopardi
Emanuel Azzopardi
7,974 Points
Emanuel Azzopardi
Emanuel Azzopardi
7,974 Points

I have uploaded the CSS, HTML and IMG files that are linked to Stage 10:multi-column layout, in my S4 phone and viewed them in Chrome and Android browser. I noted that with a -webkit-columns: 3 250px the content of the div element is still being split into 3 columns both when viewed vertically (360*640) and horizontally (640*360). Then I tried to apply some media queries for smaller view ports. Unfortunately I did not succeed. When I inspected the content through Chrome Inspect Element I noted that the device pixel ratio is 3 and apparently the website content needs some down-scaling. I did some research and found this syntax:

I applied this syntax to the head section of the HTML and removed the media queries. then I re-uploaded the content to my S4 and I achieved what I wanted i.e. content of the div element displayed as 1 column when viewed vertically (360*640) and three columns when viewed horizontally (640*360).

Is this correct? or are there any other solutions? I found another source from: http://www.developerdrive.com/2012/02/scaling-web-page-elements-using-the-css3-scale-transform/

Is this topic covered by any treehouse material?

Andres Aguero
Andres Aguero
30,545 Points
Andres Aguero
Andres Aguero
30,545 Points

Yes, without specifying Media Queries on CSS the whole responsive aspect of the website would be pointless