.wildlife in media queries isn't working properly, still too narrow when viewing on phone devices.

Question

/* Media Queries -------------------- */
@media (max-width: 1024px) {
  .primary.content,
  .secondary-content {
    width: 90%;
  }
  .wildlife { 
  padding: 10% 12%;
  margin: 50px 0 20px;
}
}
@media (max-width: 768px) {
  .primary.content,
  .secondary-content {
    width: 100%;
    padding: 20px;
    border-top: 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;
}
.resorts,
.tips {
  float: none;
  width: 100%;
}
.main-footer {
  padding: 20px 0;
}
}
So this is what I have but when going into developer tools and using the simulator to view the pages on mobile devices my .wildlife class is still too narrow, not responsive. Everything else is fine...

Alexander Davison · Answer

You can only put media queries at the end of the script.
It is required to do so, not only conventional. If you don't, the page won't be responsive as you'd expect.
Move all of the media queries to the bottom of the file and it should work :smiley:
I hope this helps :grin:
Happy coding! :tada: :confetti_ball: :tada:
:dizzy: ~Alex :dizzy:

Welcome to the Treehouse Community

Looking to learn something new?

Jonathan Puc

Jonathan Puc

.wildlife in media queries isn't working properly, still too narrow when viewing on phone devices.

1 Answer

Alexander Davison

Alexander Davison

You can only put media queries at the end of the script.