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

Josie Nagy
Josie Nagy
14,992 Points
Posted by Josie Nagy
Josie Nagy
14,992 Points

Are my Media Queries working properly? (CSS / Adjusting the Layout with Media Queries)

I'm currently working on my 'Lake Tahoe' website, but it seems a bit broken?

I think I might also have some syntax errors (too many {}) Also, my 'wildlife' image and 'Abolition' font is not showing up on my website. (Even tho they did earlier.)

Here is my link: https://w.trhou.se/jn6c0asor1

Any feedback / help would be appreciated! Thank you! ?

2 Answers

James Matthews
James Matthews
21,610 Points
James Matthews
James Matthews
21,610 Points

Hey Josie!

You're right about the curly braces. You just have a small issue with your formatting of the 768px media query. You have a closing curly brace immediately underneath the query, so none of the code inside of it will execute. You also have an extra comma after the class '.secondary content'. Changing the query to this should solve the issue:

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

   .....

To solve the image issue, I don't think you've linked to it in your HTML using <img src="img/bear.jpg" alt="Bear">. Not quite sure why the fonts aren't showing though! I hope the other info helps anyway :)

Josie Nagy
Josie Nagy
14,992 Points
Josie Nagy
Josie Nagy
14,992 Points

Wow, that was a fast reply, thank you! Managed to fix the media queries + added the html in the wildlife div: <img src="img/bear.jpg" alt="Bear">

    <div class="wildlife">
        <h2>Check out all the Wildlife</h2>
        <p>
          As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of <a href="#mink">mink</a>, <a href="#bears">bears</a>, and <a href="#eagles">bald eagles</a>.
      </p>
      <img src="img/bear.jpg" alt="Bear">
      </div><!-- End .wildlife -->

So now it shows up on the page, but not full scale.

James Matthews
James Matthews
21,610 Points
James Matthews
James Matthews
21,610 Points

Note: Sorry, it wasn't a closing curly brace, it was a second opening one!

James Matthews
James Matthews
21,610 Points
James Matthews
James Matthews
21,610 Points

Apologies Josie, just had to re-watch that video to see what you had to do... They've used the background-image: property in the CSS to set the bear picture to the div. I checked our your current code and I see absolutely no errors with it...I think this happens to me sometimes and is probably a Treehouse bug.

If you delete your .wildlife class styles underneath the --Layout Styles-- section in the stylesheet, and then paste this in: 

.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 0 0 50px 10px rgba(0,0,0, .8);
  border-radius: 10px;
}

It will solve the image issue, and then make sure to do delete the line of code in the HTML that links to the image, as I suggested before...otherwise they'll be 2 images in there!