SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Threaded View

  1. #1
    SitePoint Member
    Join Date
    May 2013
    0 Post(s)
    0 Thread(s)

    Question help with media queiry for smart phone

    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
    <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" />


    <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

Tags for this Thread


Posting Permissions

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