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

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.

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,028 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,028 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!¬

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.