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

Diego Murray
Diego Murray
2,515 Points
Posted by Diego Murray
Diego Murray
2,515 Points

PROBLEM with CSS media queries. Unintentional white gap separates primary and secondary content further than anticipated

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

@media (max-width: 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;
    padding: none;
  } 
  h1 {
    font-size: 5rem;
    line-height: 1.1;
  }
  .arrow {
    display: none;
  }
  .intro {
    font-size: 1rem;
  }  
  .resorts,
  .tips {
    float: none;
    width: 100%;
  }
}

1 Answer

Justin Iezzi
Justin Iezzi
18,199 Points
Justin Iezzi
Justin Iezzi
18,199 Points

Hi Cristo,

Two issues here.

One is a typo -

@media (max-width: 768px) {
  .primary-content,
  .secondary-content {
    width: 100%;
    padding 20px;
    border: none;
  }

You're missing the colon for the padding property.

And the other is a syntax error -

  .title {
    font-size: 1.3rem;
    padding: none;
  }

none isn't a valid value for padding, try 0 instead.

Let me know if this fixes your issues. :)

Diego Murray
Diego Murray
2,515 Points
Diego Murray
Diego Murray
2,515 Points

Thanks so much. Fixed it. I also had another typo. I had 50% as a margin for .wildlife. Instead of 50px. That may have been causing some issues as well.