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

Posted by Stephen Chamroeun
Stephen Chamroeun
7,095 Points

About page header is dropping when it hits breakpoints of 480 px and 660 px. Contact header is dropped at 480px for max.

Here is my code, if anyone can check it and see what might be going on. https://w.trhou.se/e8f7dclepj

Right now, when the response css is being applied, the About page header is dropping when it hits breakpoints of 480 px and 660 px. And the Contact header is dropped at 480px as if it's responsive at a max-width. I took the code out to see what it would look like to test it that way. And it looks like the Contact header is still dropped entirely, even without the media queries being applied to it. I'm still looking into it to see what I can fix. If anyone can help, that would be a thanks in advance!

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Stephen! In short? You have a typo. It's one single character that's causing this. In your main.css you have this rule:

h3 {
  margin: 0 0 lem 0;
}

It should be:

h3 {
  margin: 0 0 1em 0;
}

They look very similar, don't they? :smiley: In your version, you typed a lower case "L" instead of the number 1. It should be 1em as opposed to lem.

Hope this helps! :sparkles:

Stephen Chamroeun
Stephen Chamroeun
7,095 Points

I can't believe I didn't notice that! I probably was typing too quickly at the time.... Thank you for pointing it out quickly or me so I could fix it! I highly appreciate that and hoping I could spot out things like you did one day! :D

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

You will, I promise! To be honest, it was the developer tools that helped me out here. When I inspected the element it was giving me a warning that the h3 rule wasn't valid. And at first glance, it did look valid. And then I saw it :smiley: As you get further along the track you will become very familiar with the developer tools in your browser.