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 William van Voorbergen
William van Voorbergen
7,852 Points

HTML / CSS Media Querie problem on Chrome / Safari

Hi everybody, I'm making a website with HTML and CSS and try to add some media queries. On Mozilla Firefox it works fine but I have problems with Chrome and Safari (and maybe more web browsers). When I open the page on a laptop screen it works fine. When I make the screen smaller it also works fine, but when I make it full screen again it goes wrong and the logo and navigation are out of place.

Can somebody look into my html and css and tell me what the problem is? The website is http://www.williamvv.com/DFE

Hope to hear from you soon.

Regards,

William

4 Answers

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

It appears that when the screen gets so wide that the menu goes down to the right it is because at that point it is set to float: right. So it's behavior is correct.

nav ul {
  float: right;
}

That is because you have a media query of max-width 1200px but, when the screen reaches that it continues.

you may want to give your nav a max-width value so that it can't actually go above that size.

Also, at no other point is the float right actually happening so maybe just take it out? try commenting it out and trying to see if it behaves as you want it to.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

You can fix it by doing this

nav ul {
    list-style-type: none;
    float: right;
    margin-top: -65px;  // this is what I added in. I don't know where this is in your code though
    margin-right: 50px;
}

I would look for wherever it says float: right though as it is only time it floats right....

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Actually a better way to fix that, which is probably more correct and shouldn't cause problems in other browsers...

add a 

.blacksword-h1 {
   float: left;
}

.introduction-h2 {
  clear: both;
}
William van Voorbergen
William van Voorbergen
7,852 Points
William van Voorbergen
William van Voorbergen
7,852 Points

Thank you for your reply! It kinda works now. I had my float in media querie of nav ul to none. I put it to right and add a margin-right of 0 px. Now it works.