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 trialKatie Charles-McGrath
1,823 PointsMedia queries screw things up.
After adding the media queries in responsive.css, the gap at the top of the page reappears but only on the "About" page. Additionally, the iconography on the Contact page is all the way to the left side of the page on wider widths. I've tried copying and pasting the files included with this video and the issue still occurs.
1 Answer
Jonathan Grieve
Treehouse Moderator 91,253 PointsHi Katie,
If you use Google Chrome you can search in Chrome Dev Tools to find the element that's causing the gap to appear. It might be a problem to do with collapsed margins. Immediately I would start by looking at the image in about.html with the class of profile-photo.
Use it to investigate and see what the difference is between the 2 pages.
Good luck :)
Katie Charles-McGrath
1,823 PointsThanks for the tip. It turned out that I had:
h3 {
0 0 1em 0;
}
Instead of
h3 {
margin: 0 0 1em 0;
}
Doh! So, there were some styles from normalize.css that were not being overridden.
Katie Charles-McGrath
1,823 PointsKatie Charles-McGrath
1,823 PointsHere's my code:
CONTACT PAGE
ABOUT PAGE
MAIN.CSS
RESPONSIVE.CSS