Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post

    Understanding media Queries

    Hey all.
    So I'm getting into responsive website design, but my first question is how media queries work? For example, after following a lynda.com tutorial I have the following 4 CSS files linked to my page:

    Code:
    <link rel="stylesheet" type="text/css" href="css/layout_large.css" />
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="css/layout_medium.css" />
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="css/layout_small.css" />
    <link rel="stylesheet" type="text/css" href="css/nav-forms.css" />
    layout_large.css loads by default, and when the screen resizes the css from the _small or _medium files override the rules within. BUT, if I place a rule in nav-forms.css, it will not change when the screen resizes.

    Could someone please explain? Do I need to define the first css file as "greater than 801 pixels"?

    Thank you.

  • #2
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    **SOLUTION**

    Oops. The ORDER of the CSS files matters. nav_forms was loading last and seemed to be given the most weight as a result. This prevented my changes to occur the way I intended.


  •  

    Posting Permissions

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