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 marcos baker
marcos baker
6,387 Points

My media queries are not working. Can someone help?

Here is my html code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Marcos Baker | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body class="home"> <nav class="navWrapper" > <nav class="navInner" media="screen and (max-width: 480px)"> <a href="index.html" class="selected current">Portfolio</a> <a href="about.html" class="selected">About</a> <a href="contact.html" class="selected">Contact</a> </nav> </nav> </body> </html>

And here is my css:

nav a { color: white; font-size: 0.85rem; line-height: 1.5rem; padding-top: 5px; padding-bottom: 10px; width: 146px; float: left; border-right: 1px dotted white; text-align: center; transition: all 0.2s ease; }

.navInner { margin: auto; /width: 0;/ max-width: 1142px; padding-right: 50%; }

.navWrapper { position: fixed; width: 100%; border-bottom: 2px solid white; z-index: 7; /* background: url(../img/paper.jpg) repeat; / /*background-size: 400px;/ }

nav a { //font-weight: 800;// background-color: white; padding: 10px 10px; }

body.home .current { background-color: white; }

body.home input, body.home .selected:hover, body.home .selected.current { color: #6ab47b; }

.selected:hover, .selected.current { background-color: white; }

/********************************* media *********************************/

@media screen and (max-width: 480px) { nav a { border-bottom: 1px dotted white; } }

I'm trying to get a dotted border on the bottom of my links when the browser scales down to 480px and it's not working.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Just fixed the syntax highlight

<!DOCTYPE html>

<meta charset="utf-8">
<title>Marcos Baker | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' 
rel='stylesheet' type='text/css'>
  <nav class="navWrapper" >
    <nav class="navInner" media="screen and (max-width: 480px)">
      <a href="index.html" class="selected current">Portfolio</a>
      <a href="about.html" class="selected">About</a>
      <a href="contact.html" class="selected">Contact</a>
    </nav>
  </nav>

nav a {
 color: white;
font-size: 0.85rem;
 line-height: 1.5rem;
 padding-top: 5px;
 padding-bottom: 10px;
 width: 146px;
 float: left;
 border-right: 1px dotted white;
 text-align: center;
 transition: all 0.2s ease; }

.navInner { 
margin: auto /width 0;/; 
width: 0;
max-width: 1142px;
 padding-right: 50%; 
}

.navWrapper 
{ position: fixed;
 width: 100%;
 border-bottom: 2px solid white;
 z-index: 7; 
 background: url(../img/paper.jpg) repeat;
background-size: 400px;/ 
}

nav a {
 //font-weight: 800;// 
background-color: white;
 padding: 10px 10px;
 }

body.home .current {
background-color: white;
 }

body.home input,
 body.home .selected:hover, 
body.home .selected.current {
 color: #6ab47b;
 }

.selected:hover,
 .selected.current {
 background-color: white;
 }

/********************************* media *********************************/

@media screen and (max-width: 480px) {
 nav a { 
border-bottom: 1px dotted white; 
  }
}

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

It looks okay to me. Have you checked that your inline media query for .navInner isn't in some way overriding your main media query for nav a? It's a long shot from what I can see but it's all I can think of.

You've included your viewport tag. Which browser and platform are you using to check they're working? :-)

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Here's something else i noticed.

Try fixing your comments to look like this /* comment*/

CSS doesn't do one line comments like in other languages like JavaScript

So CSS can do this 

nav a {
 /*font-weight: 800; */ 
background-color: white;
 padding: 10px 10px;
 }

but not this

nav a {
 //font-weight: 800;// 
background-color: white;
 padding: 10px 10px;
 }

Hope this helps!¬

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

It doesn't look like you are calling the file properly in your head. The Google font tag does not close and the link to the css file does not open.

When solving one of my frequent problems I start by looking at the scope of the problem. Does any of the css work? If not, I look at the link to the http first. If it is just some things I look at the css itself.