SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Media Query query

    Hi,
    I'm building this site:
    http://www.eftharmony.co.uk/

    At first I was using '@media only' for the changes in size/layout, but they didn't work.
    I changed them to '<link rel ...>' with only the changes in layout in each stylesheet. This didn't work either.
    So in the end I've put the whole stylesheet in '<link rel ...>' and this doesn't work.
    I've changed the order of the stylesheets and always the bottom one is the only one that seems to work (at least the cascade works).
    Can some of you clever people have a look and tell me what's wrong, please, while I've got some hair left.
    Thanks as always
    Ornette

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,616
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Yes, each browser is reading each CSS file, and so only the last will apply. Instead of this:

    Code:
    <link rel="stylesheet" type="text/css" href="css/1280.css">
    <link rel="stylesheet" type="text/css" href="css/800.css">
    <link rel="stylesheet" type="text/css" href="css/480.css">
    you need something like this:

    Code:
    <link rel="stylesheet" type="text/css" href="css/1280.css" media="screen and (min-width:801px)">
    <link rel="stylesheet" type="text/css" href="css/800.css" media="screen and (min-width: 481px) and (max-width:800px)">
    <link rel="stylesheet" type="text/css" href="css/480.css" media="screen and (max-width:480px)">
    That way, you tell browsers when to use each style sheet.

    The only problem with this is that some older browsers (including IE8) may not load anything, so usually you'd set one of those sheets as the default, without any media rules. E.g.

    Code:
    <link rel="stylesheet" type="text/css" href="css/1280.css">
    <link rel="stylesheet" type="text/css" href="css/800.css" media="screen and (min-width: 481px) and (max-width:800px)">
    <link rel="stylesheet" type="text/css" href="css/480.css" media="screen and (max-width:480px)">

  3. #3
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant, thanks so much. A few adjustments to the css and home and dry.
    Is it right to say that using '@media only' you have to add the 'media".." and (min-width ..)' etc. as well to get it to work?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,616
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    I don't quite understand your question, but I do find this @media syntax a bit confusing, so I often have to mess with it a bit. I haven't actually used media rules this way, personally. I would normally have one style sheet with code marked off for different screen sizes inside that, such as

    Code:
    @media only screen and (min-width: 800px) {
    	styles here
    }
    
    @media only screen and (min-width: 481px) and (max-width: 800px) {
    	styles here
    }
    
    @media only screen and (max-width: 480px) {
    	styles here
    }
    One other thing you should do when using @media rules is place this in the head of your HTML pages:

    Code:
    <meta name="viewport" content="width=device-width">

  5. #5
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you understood what I was trying to ask and have answered it well for me.
    Interesting about the meta tag in the head. I'll do some more experimenting with it now that you have cleared up my confusion.
    Extremely grateful for your assistance Ralph.


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
  •