SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Location
    Hawaii
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question help with media queiry for smart phone

    Hi
    I am a student doing work study and designing my first web site with media queries for a client. I used these media quieries and css style sheets successfully
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />

    <title>Home</title>

    <link rel="stylesheet" type="text/css" href="css/CAN.css"/>
    <!-- CAN_medium -->
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="css/CAN_medium.css"/>
    <!-- CAN_small -->
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="css/CAN_small.css" />


    But I cannot get my media query for my iphone to work. I put it in my CAN. css file below...Can anyone help? Is my meta tag above right? Should I do it differently? Is it even the right code? I am soo stumped as to why it's not working...obviously I have a lot to learn :-?

    /*smartphones (portrait and landscape)--*/
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {

    #header {
    height: 80px;
    background-image: url(../images/logo320.jpg);
    background-repeat: no-repeat;
    background-position: left 0px;
    background-color: #c55b19;
    }
    #footer {
    background-color: #ee6a1b;
    height: 30px;
    border: thin solid #274b1b;
    }
    #content {
    font-size: 10px;
    color: #274b1b;
    height: auto;
    background-color: #FFF;
    border: 1px solid #274b1b;
    text-align: center;
    }
    }
    Last edited by charrcs; May 15, 2013 at 17:14. Reason: typos

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Hi charrcs. Welcome to the forums.

    If you have alternate rules for these elements in the third CSS file, that third CSS file will override the first, as it comes later, and the iPhone will read the styles in the third style sheet, as its dimensions are within those limits (e.g. 50px and 500px).

  3. #3
    SitePoint Member
    Join Date
    May 2013
    Location
    Hawaii
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks I am aware of the order and I've tried it without the styles for a smaller browser in the first Can.css file and it didn't work for my iPhones. It works in my browsers just fine though. I guess I should have noted that. Since the small.css file didn't work I put it in the first css file, taking it out doesn't change things. It still doesn't work.

    In my iPhones it picks up the css code for the first CAN.css but the background image doesn't show up???? Once again thats just in my iPhones.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    As always, a link is worth a thousand words. All sorts of things could be happening here, but we could probably see right away with a link.

  5. #5
    SitePoint Member
    Join Date
    May 2013
    Location
    Hawaii
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh sooo embarrassed!!!! So much wasted time! My small.css was not on my server!!! Apparently it hadn't uploaded successfully and I missed it. Thanks for your help. I won't make that mistake again.....

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Hehe, no problem. It happens to all of us.


Tags for this Thread

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
  •