Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

media queries

Hi, I'm looking for some help on some code I wrote to test out my media queries. I'm using a fluid grid with 10 columns. My goal is to make all grid classes span to 100% when the width of the browser has a max width of 480.

this is my query

@media screen and (max-width : 480px) { .grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10 { width: 100%; } }

in the head of my html, I link first a normalize stylesheet, then style.css, then the grid.css. I also have a svg image as follows. I also have a svg file that is an object with css as follows img object { width: 100%; }

This looks fine on the desktop view, and the fluid layout seems to work, however, the media query doesn't force the layout change as I adjust the browser width. Any suggestions?

2 Answers

I found the solution. After stepping away from the problem for a while. I realized that I was trying to change values in my grid using code in my style.css without importing the appropriate stylesheet. Anyway, I got it to work, in what I think is a better way. I think that it is a little more elegant if the media query is in my grid since the grid elements are being affected by the query. Is this a fair assumption?

Chase Lee
Chase Lee
29,275 Points

Try putting the gird stylesheet before the style.css one. I don't think this applies to CSS but with JavaScript if you have a js file that includes jQuery and you put it before the jquery.js file it will not work.

Thanks Chace, I gave it a shot. and it didn't change anything. Good thinking though. It does matter what order the css stylesheets get applied, so it was worth a shot.

I get the feeling it has to do with a vsg object if it's not the query. This is the code I have for it. <div class="grid4 rightedge"><br> <object data="img/devices.svg" type="image/svg+xml"><br> <a href="img/devices.svg"><br> <!--If lte IE8--><br> <img src="img/devices.jpg" alt="Web Devices"><br> <!--End If--><br> </a><br> </object><br> </div><br>

I defined images and object width's to 100% of it's parent element (which is the grid) in the style.css