www.webdeveloper.com
Results 1 to 6 of 6

Thread: @media not working for displaying tablets like ipad

Hybrid View

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    @media not working for displaying tablets like ipad

    I am trying to make my website responsive. I have managed to get the site to display in most mobile browsers but I can't get it to display in tablets like the ipad.

    The website displays as it should in landscape mode but in portrait mode the nav bar wraps outside of it's border and the sub menu doesn't work properly

    I have resized the nav bar so that it fits in one line and used the following css at the foot of the css file. This file is linked to the html file to make the changes;

    Code:
    @media only screen and(max-device-width: 950px) and (orientation: portrait)
    body { 
        max-width: 60.00em;
        margin: 0 auto;
        padding-bottom: 90px;
        }
    
    #menu ul {
        padding: 4px;
        font-family: Arial,Verdana;
        font-size: 1.00em;
        list-style: none;
        background: #fffff0;
    }
    }
    It seems that safari isn't reading the above code as there no changes in the display.
    How do i get tablets to read the above @media script or what changes do I need to make?

  2. #2
    Join Date
    Mar 2009
    Posts
    452
    i am not pretty sure but try max-width

    also try setting view-port

  3. #3
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    Quote Originally Posted by ZABI View Post
    i am not pretty sure but try max-width

    also try setting view-port
    Thanks but what you suggested doesn't work unless the viewport tag is wrong.

    HTML Code:
    <meta name="viewport" content="width=device-width, initial-scale=1">

  4. #4
    Join Date
    Sep 2008
    Location
    Dallas
    Posts
    154
    Why define a width if your media query is responding to widths? Just set your width 100%.

  5. #5
    Join Date
    Mar 2013
    Posts
    2
    Quote Originally Posted by Javaboey View Post
    Why define a width if your media query is responding to widths? Just set your width 100%.


    I think your right.. It should be set to 100%.

  6. #6
    Join Date
    Mar 2013
    Posts
    2
    Quote Originally Posted by tony webb View Post
    I am trying to make my website responsive. I have managed to get the site to display in most mobile browsers but I can't get it to display in tablets like the ipad.

    The website displays as it should in landscape mode but in portrait mode the nav bar wraps outside of it's border and the sub menu doesn't work properly

    I have resized the nav bar so that it fits in one line and used the following css at the foot of the css file. This file is linked to the html file to make the changes;

    Code:
    @media only screen and(max-device-width: 950px) and (orientation: portrait)
    body { 
        max-width: 60.00em;
        margin: 0 auto;
        padding-bottom: 90px;
        }
    
    #menu ul {
        padding: 4px;
        font-family: Arial,Verdana;
        font-size: 1.00em;
        list-style: none;
        background: #fffff0;
    }
    }
    It seems that safari isn't reading the above code as there no changes in the display.
    How do i get tablets to read the above @media script or what changes do I need to make?

    Does it work with samsung tablets?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles