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 Amanda Bater
Amanda Bater
7,686 Points

Safari issues - please help!

I'm trying to iron out browser inconsistancies in a website I've been building, and my main issue is that in Safari the header disappears when the screen width is more than 1024px. It's not just the image that isn't visable, everything inside the header is gone. It's fine at a narrower width, and in Firefox, Chrome and Opera.

When I used the dev tools to inspect, I noticed that banner and everything in it has height set to 0px. Which I guess is why it's not visible, but why is it suddenly changing to 0px and how do I fix this? I've tried adding a min-height but that didn't make any difference.

Has anyone else experienced this? Does anyone know how to fix it?

Link to my Codepen below...

http://codepen.io/ajbater7/pen/aZzmjy

3 Answers

Nathan Tallack
Nathan Tallack
22,164 Points
Nathan Tallack
Nathan Tallack
22,164 Points

I'd say your problem is with your @media (min-width: 1025px) media query is setting the .main-image display to none. Try removing that.

Amanda Bater
Amanda Bater
7,686 Points
Amanda Bater
Amanda Bater
7,686 Points

Thank you for your answer. .main-image display is set to none only so that the image will not be shown in larger browser windows. Even if I remove this part of the code the problem still occurs :(

Nathan Tallack
Nathan Tallack
22,164 Points
Nathan Tallack
Nathan Tallack
22,164 Points

Well it does sound like the problem is with your media queries.

To be sure try removing all of your media queries and then adding them and their items back one by one until you learn which one is the problem.

Amanda Bater
Amanda Bater
7,686 Points
Amanda Bater
Amanda Bater
7,686 Points

I have fixed it! Just experimented with commenting out different lines of code until I found the culprit...I still don't fully understand why this broke but at least I have it working now!

Nathan Tallack
Nathan Tallack
22,164 Points
Nathan Tallack
Nathan Tallack
22,164 Points

Great work! Revisit your code in a few weeks when you have learnt more and you might be able to work out what it was. :)