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 David Wells
David Wells
1,812 Points

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

David Wells
David Wells
1,812 Points
David Wells
David Wells
1,812 Points

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
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.

David Wells
David Wells
1,812 Points

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