SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    192
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    do media queries ignore html5 elements?

    Originally I had this in a media query and everything was ok.

    Code CSS:
    @media (max-width: 870px){
        #menu {
            left: 0;
        }
        #layout{
            padding-left: 0;
            position: relative;
        }
        #navLink{
            display: block;
        }
    }

    Then I changed #menu to nav ( changed all coresponding code in my .html and .css file )

    and my page breaks. Changed it back and it works.

    Do I div#menu or nav#menu. Do media queries not understand new HTML5 elements?

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,254
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    css should hook into the new html5 elements just fine. Can we see the full css and the full html, both for the working example, and for the non-working? I'm betting it's something which another pair of eyes will pick up on.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    192
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    ok, Chrome's developers tools has slightly different features that FireBug so I was able to see that changing <div id="menu"> to <nav> makes specificity of the responsive library I'm using http://purecss.io/ change.

    Thanks for looking though.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sessions View Post
    ok, Chrome's developers tools has slightly different features that FireBug so I was able to see that changing <div id="menu"> to <nav> makes specificity of the responsive library I'm using http://purecss.io/ change.
    Then just use <nav id="menu"> for the same specificity.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •