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
adrie silva
6,416 PointsWhat to do if I can't use Media Queries with IE 6-8 for Responsive Design
Hello.
I would like to know how to create a responsive design for older browsers. I know Media Queries wont work with IE 6-8, so what works best here?
And is there a video tutorial for this?
3 Answers
Sean T. Unwin
28,690 PointsIt will only work on a web server, even a local server if you have XAMPP or similar installed. Respond.js does not work with file: URLs as stated in the aboutme (main) page on github.
I tested with IE10 dev tools emulating IE 7 & 8 and it worked for me.
Sean T. Unwin
28,690 PointsThere are not really any mobile devices that support IE6-8 so the worry is practically unwarranted ( meaning based on use case), in my opinion. You could set widths for IE6-8 to percentages so at least your layouts are fluid, although still not responsive.
If you would still like to, or need to, use media queries for those browsers you could look at Respond.js or css3-mediaqueries.js.
adrie silva
6,416 Pointshi there,
I've actually been attempting to use those two js libraries in a simple html page and can't get them to work.
Their instructions are easy: create media queries and include the js file in the head tag. But if that's it then I'm not sure what I'm doing wrong.
I have no issues creating media queries and I just can't get either js to work.
Can you take a quick look? https://www.dropbox.com/sh/41r7pwuk6aw782u/56whS-dSV8
Sean T. Unwin
28,690 Pointsedit: Glad you got it worked out!
adrie silva
6,416 Pointsadrie silva
6,416 PointsI have those files in a local server using XAMPP. What do you mean by URLs?
I'm also using ie10 dev tools as you did and can't get respond.js to work.
But so my files on dropbox are correct?
I have those files in the htdocs folder of my xampp local server.
Sean T. Unwin
28,690 PointsSean T. Unwin
28,690 PointsWhen I resize IE10 with emulation the layout changes to a single column layout.
URL is the web address, e.g. http://localhost/test-responsive.html, and what I meant previously is that if you simply load it from file:///C:/Users/Sean/test/test-responsive.html (as an example) then Respond.js will not work.
adrie silva
6,416 Pointsadrie silva
6,416 Pointsthat may be my problem, but i'm not understanding.
how should it be 'loaded'? I don't quite understand that part.
adrie silva
6,416 Pointsadrie silva
6,416 Pointsoh wait! I think I understand.. I need to use the URL with localhost in it.. is that correct?
adrie silva
6,416 Pointsadrie silva
6,416 PointsYayee! It works perfectly now!
Overall this was a very easy thing. Thank you for helping me. It was a beginner's mistake.
All cleared up now.
:)
Sean T. Unwin
28,690 PointsSean T. Unwin
28,690 PointsThe files should be somewhere in your xampp/htdocs/ directory (e.g xampp/htdocs/test-respond/). Make sure Apache is running (start it from the XAMPP Control Panel). When you access the html file from your browser you would type in the address bar: http://localhost/test-respond/test-responsive.html.