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 Adjusting the Layout with Media Queries

Liliana Leyva
Liliana Leyva
3,711 Points
Posted by Liliana Leyva
Liliana Leyva
3,711 Points

Why my 2nd @media query is not working? when I view the site the h1 (word California) goes down to the P.

here is my code:

@media (max-width: 1024px) {
  .primary-content,
  .secondary-content {
   width: 90%;
  }
}

@media (max-width: 760px){
  .primary-content,
  .secondary-content {
    width: 100%;
    padding: 20px;
    border: none;
  }
  .main-header{
    max-height: 380px;
    padding: 50px 25px 0;
  }
  .title {
    font-size: 1.3rem;
    border: none;
  }
  h1 {
    font-size: 5rem;
    line-height: 1.1;
  }
.arrow {
  display: none;
  }

}

8 Answers

DavidPaul sullivan
DavidPaul sullivan
17,377 Points
DavidPaul sullivan
DavidPaul sullivan
17,377 Points

Your media queries should always go on the bottom of your CSS :)

Liliana Leyva
Liliana Leyva
3,711 Points
Liliana Leyva
Liliana Leyva
3,711 Points

I put them at the bottom, I don't know what I did wrong :S

/* Web Fonts -------------------- */

@font-face {
  font-family: 'Abolition Regular';

  src: url('../fonts/abolition-regular-webfont.eot');
  src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/abolition-regular-webfont.woff') format('woff'),
       url('../fonts/abolition-regular-webfont.ttf') format('truetype');
}



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

* {
  box-sizing: border-box;
}

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

h1,h2 {
  font-family: 'Abolition Regular', 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: 0px 1px 1px rgba(0, 0, 0, .8);
  margin: 12px 0 0;
}

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;
  border-radius: 10px;
}

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:linear-gradient(#ffa949, transparent 90%),
             linear-gradient(0deg, #fff, transparent),
             #ffa949 url('../img/mountains.jpg') no-repeat center;
  background-size: cover;


}

.title {
  color: white;
  font-size: 1.625rem; /* 26px/16px */
  letter-spacing: .065em;
  font-weight: 200;
  border-bottom: 2px solid; 
  padding-bottom: 10px;
}

.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;
  box-shadow: inset 0px 0px 50px 10px rgba(0,0,0, .1);


  border-radius: 10px;

}

.arrow {
  width: 50px;
  margin-top: 150px;
}

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

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

.tips {
  float: left;
}

.resorts {
  float: right;
}

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

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

/* Media Queries -------------------- */



@media (max-width: 1024px) {
  .primary-content,
  .secondary-content {
   width: 90%;
  }
.wildlife {
  padding: 10% 12%;
  margin: 50px 0 20px;
}
}

@media (max-width: 760px){
  .primary-content,
  .secondary-content {
    width: 100%;
    padding: 20px;
    border: none;
  }
  .main-header{
    max-height: 380px;
    padding: 50px 25px 0;
  }
  .title {
    font-size: 1.3rem;
    border: none;
  }
  h1 {
    font-size: 5rem;
    line-height: 1.1;
  }
  .arrow {
    display: none;
  }
  .intro {
    font-size: 1rem;
}


}
Liliana Leyva
Liliana Leyva
3,711 Points
Liliana Leyva
Liliana Leyva
3,711 Points

I guess was just a setting that I have on Chrome :)

DavidPaul sullivan
DavidPaul sullivan
17,377 Points
DavidPaul sullivan
DavidPaul sullivan
17,377 Points

Glad ya got it working! Sometimes I even have issues with cookies and workspaces. Good luck on your next section!

DavidPaul sullivan
DavidPaul sullivan
17,377 Points
DavidPaul sullivan
DavidPaul sullivan
17,377 Points

Mmmm, maybe I mis understood the question. My bad. It actually looks like your code is fine, can you upload a screen shot or maybe even your html? I even ran my old workspace and compared and used your code and everything was fine.

Liliana Leyva
Liliana Leyva
3,711 Points
Liliana Leyva
Liliana Leyva
3,711 Points

Was just a setting that I had on the browser :).. Thank you

Caitlin Dudley
Caitlin Dudley
3,866 Points
Caitlin Dudley
Caitlin Dudley
3,866 Points

I think I'm having the same issues over here. My second media query isn't responding on my browser. Anyway someone could share what that Chrome setting was? I tried to play around with Device Mode in Devtools but didn't really get anywhere. This is my media query section and it's at the bottom of my CSS style sheet.

@media (max-width: 1024px) {
  .primary-content,
  .secondary-content {
    width: 90%;
  }
  .wildlife {
    padding: 10% 12%;
    margin: 50px 0 20px;
  }
}

@media (max-wdith: 768px) {
  .primary-content,
  .secondary-content {
    width: 100%;
    padding: 20px;
    border: none;
  }
  .main-header {
    max-height: 380px;
    padding: 50px 25px 0;
  }
  .title {
    font-size: 1.3rem;
    border: none;
  }
  h1 {
    font-size: 5rem;
    line-height: 1.1;
  }
  .arrow {
    display: none;
  }
  .intro {
    font-size: 1rem;
  }

}
DavidPaul sullivan
DavidPaul sullivan
17,377 Points
DavidPaul sullivan
DavidPaul sullivan
17,377 Points

try flipping your media queries (so 768px first then 1024px) I know it sounds weird but thats worked for me in the past.

Caitlin Dudley
Caitlin Dudley
3,866 Points
Caitlin Dudley
Caitlin Dudley
3,866 Points

Meh, that didn't work for me.

DavidPaul sullivan
DavidPaul sullivan
17,377 Points
DavidPaul sullivan
DavidPaul sullivan
17,377 Points

and it works fine in other browsers?

DavidPaul sullivan
DavidPaul sullivan
17,377 Points
DavidPaul sullivan
DavidPaul sullivan
17,377 Points

Also try using min-width for your first query 

@media (min-wdith: 768px) {
  .primary-content,
  .secondary-content {
    width: 100%;
    padding: 20px;
    border: none;
  }
Caitlin Dudley
Caitlin Dudley
3,866 Points
Caitlin Dudley
Caitlin Dudley
3,866 Points

I think there may be something wrong with my code. I tried a different chrome profile and firefox as well as moved the max-width: 1024px media query down below and switching to min-width: 768px but nothing happens.

DavidPaul sullivan
DavidPaul sullivan
17,377 Points
DavidPaul sullivan
DavidPaul sullivan
17,377 Points

Face Palm. Sorry I just saw it. Your second media query is spelled "wdith" fix that typo and you'll be golden

Caitlin Dudley
Caitlin Dudley
3,866 Points
Caitlin Dudley
Caitlin Dudley
3,866 Points

Geez, face palm indeed, it worked! Thank you!

DavidPaul sullivan
DavidPaul sullivan
17,377 Points
DavidPaul sullivan
DavidPaul sullivan
17,377 Points

It's all good! I do this alll the time, sometimes I just gotta slow down and read EVERYTHING lol. Good luck!

Nathan Angulo
Nathan Angulo
4,565 Points
Nathan Angulo
Nathan Angulo
4,565 Points

What am I doing wrong. Everything is wonky and sizing awkwardly.

https://w.trhou.se/4g7la66ats