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
Chetan Jaisinghani
2,896 PointsMedia queries show no effect
So I did what's shown in the video but for some odd reason the media queries don't work for me. I noticed that a few other people here have had similar issues too.
So here's what I've tried:
- The console - No errors shown here
- Different browser - Not working in any browser
- The 2nd media query, i.e. hiding the select and the button at larger widths was initially working. So for the 1st media query, i.e. to hide the menu at smaller widths, I thought may be I would clear my cache and then check. After I cleared the browser's cache, even the 2nd media query stopped working!
- I've also tried removing the space between min-width and the pixel number
- Tried splitting the 2nd media query
Here's my code:
//Problem: Not designed from smaller browser widths and small devices
//Solution: To hide the text links and swap them out with a more appropriate navigation
//Create a select and append to #menu
var $select = $("<select></select>");
$("#menu").append($select);
//Cycle over menu links
$("#menu a").each(function(){
var $anchor = $(this);
//Create an option
var $option = $("<option></option>");
//Option's value is the href of the link
$option.val($anchor.attr("href"));
//Option's text is the text of link
$option.text($anchor.text());
//Append option to select
$select.append($option);
});
//Create button
var $button = $("<button>Go</button>");
$("#menu").append($button);
//Bind click to button
$button.click(function(){
//Go to select's location
window.location = $select.val();
});
//Deal with selected options depending on current page
CSS CODE HERE:
//Modify CSS to hide links on small width and show button and select
@media (min-width:320px) and (max-width:568px) {
#menu ul {display:none;}
}
//Also hides select and button on larger resolutions
@media (min-width:568px) {
#menu select {display:none;}
#menu button {display:none;}
}
5 Answers
Jeremy Kerrigan
12,002 PointsTake out all the comments // in your stylesheet. That worked for me. Don't know why the comments were causing the problem, but it isn't the first time the comments caused issues when before my media queries.
Sergey Podgornyy
20,660 PointsYou are right. I marked your answer as the best one. Because a CSS comment starts with /* and ends with */
Anna Grais
12,743 PointsThank you!
Anna Grais
12,743 PointsThank you!
Sergey Podgornyy
20,660 PointsTry this code:
/*Modify CSS to hide links on small width and show button and select*/
@media screen and (min-width:320px) and (max-width:568px) {
#menu ul {display:none;}
}
/*Also hides select and button on larger resolutions*/
@media screen and (min-width:568px) {
#menu select {display:none;}
#menu button {display:none;}
}
The 3 meta tags below must come first in the head; any other head content must come after these tags
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Ronald Hunter
17,474 Pointsdo you have the correct meta tag?
Chetan Jaisinghani
2,896 PointsYes I do
Rich Braymiller
7,119 PointsThe media query on mine worked before I did the //Deal with selected options depending on current page on the jQuery.
Media Query no longer working. very frustrated, went over code, not sure what I'm missing....
Sergey Podgornyy
20,660 PointsCan you post your code?
Daniel Sokol
14,888 PointsThank you, Jeremy. Had the same issue. Deleted comments in the CSS stylesheet and now it works fine.
Kristopher Van Sant
Courses Plus Student 18,830 PointsKristopher Van Sant
Courses Plus Student 18,830 PointsHi there, I adjusted the markdown you placed to make the code more readable. For future reference be sure to include the 3 closing back-ticks ``` at the end of you code. :)