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 CSS Basics (2014) Enhancing the Design With CSS Media Query Basics

Rizwan Ahmed
Rizwan Ahmed
1,089 Points
Posted by Rizwan Ahmed
Rizwan Ahmed
1,089 Points

Media query not working

Hi,

I can't figure out why my media query isn't working. Please help! (It's right at the bottom)

/* Base Styles -------------------- */

* {
  box-sizing: border-box;
}

body {
  color: #878787;
  margin: 0;
  font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {  
  font-size: 5.625rem; /* 90px/16px  */
  color: rgba(255, 255, 255, 1);
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1.3; 
  text-shadow: 0 1px 1px rgba(0,0,0,.8);
}

h2 {
  font-size: 3.3125em; /* 53px/16px  */
  font-weight: normal;
  line-height: 1.1;
  margin: 0 0 .5em; /* 0 0 26px */
}

h3 {
  font-size: 1.25em; /* 20px/16px  */
  color: #48525c;
  line-height: 1.2;
  margin-bottom: 1.7em; /* 34px */
}

img {
  max-width: 100%;
  margin-bottom: 20px;
}

ul,
ol {
  margin: 30px 0;
}

li {
  margin-bottom: 10px;
}

/* Pseudo-classes ------------------ */

a:link {
  color: rgb(255, 169, 73);
  text-decoration: none;
}

a:visited {
  color: lightblue;
}

a:hover {
  color: rgba(255, 169, 73, .4);
}

a:active {
  color: lightcoral;
}

/* Main Styles --------------------- */

.main-header {
  padding-top: 170px;
  height: 850px;
  background: #ffa949 url('../img/mountains.jpg') no-repeat center;
  background-size: cover;
}

.title {
  color: white;
  font-size: 1.625rem; /* 26px/16px */
}

.intro {
  font-size: 1.25em; /* 20px/16px */
  line-height: 1.6;  
}

.primary-content,
.main-header,
.main-footer {
  text-align: center;
}

.primary-content {
    padding-top: 25px;
  padding-bottom: 95px;
}

.secondary-content {
    padding-top: 80px;
    padding-bottom: 70px;
  border-bottom: 2px solid #dfe2e6;
}

.callout {
  font-size: 1.25em;
  border-bottom: 3px solid;
  padding: 0 9px 3px;
  margin-top: 20px;
  display: inline-block;
}

.main-footer {
  padding-top: 60px;
  padding-bottom: 60px;
  border-bottom: 10px solid #ffa949;
}

.t-border {
  border-top: 2px solid #dfe2e6;
}

/* Layout Styles ------------------ */

.primary-content, 
.secondary-content {
  width: 75%;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  max-width: 960px;
}

.wildlife {
  color: white;
  text-align: left;
  padding: 18% 24%;
  border-top: 10px solid #ffa949;
  margin: 105px 0 60px;
  background: #434a52 url('../img/bear.jpg') no-repeat center;
  background-size: cover;
}

.arrow {
  width: 50px;
}

/* Floated Columns ------------------ */

.resorts,
.tips {
  width: 46.5%;
}

.tips {
  float: left;
}

.resorts {
  float: right;
}

/* Float Clearfix ------------------ */

.group:after {
  content: "";
  display: table;
  clear: both;
}

<!-- CSS media query within a stylesheet -->

@media all (max-width: 760px) {

  body {

    background-color:royalblue;

  }

}

2 Answers

jacobproffer
jacobproffer
24,604 Points
jacobproffer
jacobproffer
24,604 Points

Hey Rizwan,

There's a few ways to go about this.

First, if you want to use the keyword all, you need to follow that with and before the size is declared. 

@media all and (max-width: 760px) {
  body {
    background-color:royalblue;
  }
}

With that being said, all is implied by default, so you could just do:

@media (max-width: 760px) {
  body {
    background-color:royalblue;
  }
}
Rizwan Ahmed
Rizwan Ahmed
1,089 Points
Rizwan Ahmed
Rizwan Ahmed
1,089 Points

I copied and pasted you codes but it still doesn't seem to be working.

jacobproffer
jacobproffer
24,604 Points

Hey Rizwan,

Are you on the following challenge: https://teamtreehouse.com/library/css-basics/designing-with-the-latest-features/media-queries-2

If so, then you'll need to follow the challenge instructions. I'm not seeing a mention of changing the background-color to royalblue.

Below is the correct code for the challenge.

/* Complete the challenge by writing CSS below */

@media (max-width: 1020px) {
  .main-header {
    color: white;
    background-color: tomato;
  }
}

@media (max-width: 768px) {
  .title {
    font-size: 1.4rem;
  }
  h1 {
    font-size: 5rem;
  }
}
Anthony Scott
PLUS
Anthony Scott
Courses Plus Student 9,001 Points
Anthony Scott
Anthony Scott
Courses Plus Student 9,001 Points

using the "all" keyword after @media actually causes the entire query to fail in the latest version of Chrome.