CODEWITHSUNDEEP
htmlcssmedia-queries
User2013
User2013

Reputation: 409

CSS media-queries issue, why isn't it reseting back to normal?

I'm having a weird issue here.

Codepen: http://codepen.io/anon/pen/yFbAs

When resized above 979px, the navigation menu ('#nav' div) should appear inline with the div '#logo', vertically in the middle of it. This appears fine when the page is first loaded. (codepen will default to the <979px though so you wont get to see that unless you try it yourself)

When resized to >979px, the '#nav' div is on a new line, as if it or '#logo' is not reset back to an inline-block but is instead appearing to stay as a 'block' element. However, when I check what's going on with the chrome developer tools it appears that it has properly reset back to 'inline-block'. Is the issue with my design?

Any insight is greatly appreciated!

Thanks

Upvotes: 1

Views: 72

Answers (2)

Andrew Johnson
Andrew Johnson

Reputation: 446

Try this edit to your css

http://codepen.io/anon/pen/vHypu 

#header {
    font-family: 'Montserrat', sans-serif;
    padding:5px;
    clear:both;
}

#header #logo {
    float:left;
    font-family: Georgia;
    font-size:3em;
    font-style: italic;
}
@media only screen and (min-width: 650px) and (max-width: 979px) {

  #header #logo {
      display:block;
      text-align:center;
      float:none;
}

Upvotes: 3

ekhaled
ekhaled

Reputation: 2930

It looks like a rendering bug in chrome, as it does not happen on Firefox,

The way around it would be to float the logo left too

Here is a working edited pen http://codepen.io/anon/pen/ovBge

Upvotes: 1

Related Questions