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

HTML How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Seb Soithongsuk
Seb Soithongsuk
2,190 Points

Help please! Cannot get the browser window to respond to media queries.

I've followed the tutorial very carefully, and I can't seem to get the media query to work. I've set the background colour to red for screen sizes wider than 480px.

See my HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Seb Soithongsuk | Graphic Design</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Karla:400,700,700italic,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link ref="stylesheet" href="css/responsive.css">
  </head>

See my CSS

@media screen and (min-width: 480px) {
  body {
background: red;
  }
}

The responsive.css file is definitely sitting in the css folder.

I thought it might be an issue with workspaces so I downloaded the zip and tested it in different browsers but it's still not working.

I've got a feeling I'm missing something reeeally obvious here, but I just can't find it right now.

If it helps at all, the only thing I can notice is that in the tutorial, Nick's CSS is colour-coded differently to mine, which is indicating to me something's wrong. The language of the file is definitely CSS too.

Cheers.

3 Answers

Seb Soithongsuk
Seb Soithongsuk
2,190 Points

Oh dear...just realised I typed in 'ref' instead of 'rel' in my HTML.

I thought I'd leave this here as well just in case others are still having trouble.

Gerard Weppler
Gerard Weppler
4,357 Points

I see you answered your own question, good stuff!

What I do when something is not working I either read each and every character one by one or I rewrite my code again. That is usually my starting point.

Seb Soithongsuk
Seb Soithongsuk
2,190 Points

Agreed - will take that into consideration next time.