Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #24153

    Hi,

    I’m using a large logo and so i’m using the following custom CSS that i found in another thread here in order to have my menu centred underneath the logo on the iPad other wise the menu overruns into the logo. It works perfectly when the iPad is in portrait but I would like the same layout when the iPad is in landscape mode too with the logo centred and menu below it. How can I achieve this? The CSS i’m using is…

    /* Tablet Portrait size to standard 960 (devices and browsers) */

    @media only screen and (min-width:768px) and (max-width:989px) {
    .responsive .thumbnails_container .slideThumb {
    margin-right:19px;
    }
    .responsive .side-container-inner .minor-meta {
    text-align: center;
    }
    /*thumbnail slideshow*/
    .responsive .thumbnails_container .slideThumb {
    margin-right: 13px;
    }
    /*dynamic*/
    .responsive #top .callout {
    font-size:30px;
    }
    .responsive #top.yanone_kaffeesatz .callout {
    font-size: 40px;
    }
    /*header*/
    .responsive .main_menu {
    background:none;
    box-shadow:none;
    }
    .responsive .main_menu,.responsive .logo {
    text-align:center;
    position:relative;
    top:auto;
    margin:0 auto;
    display:block;
    float:none;
    left:auto;
    right:auto;
    height:auto;
    padding:15px 0;
    clear:both;
    width:100%;
    }
    .responsive .main_menu div,.responsive .logo a,.responsive .logo img {
    display:inline-block;
    float:none;
    }
    .responsive .header_meta {
    position:relative;
    margin:0;
    top:0;
    }
    .responsive .header_meta #searchform {
    display:none;
    }
    .responsive .header_meta .small_header_info {
    position:relative;
    text-align:center;
    bottom:auto;
    margin:0 auto;
    float:none;
    }
    .responsive #top .social_bookmarks {
    position:relative;
    top:auto;
    clear:both;
    margin:0;
    width:100%;
    overflow:hidden;
    text-align:center;
    height:40px;
    }
    .responsive #top .social_bookmarks li,.responsive #top .social_bookmarks li a {
    display:inline-block;
    float: none;
    }
    }

    Thanks!

    #122554

    Hi,

    What most people forget to realize is that there are multiple versions of iPad out , each a bit different, and with Kindle and all the Android and now some Windows Tablets , there’s quite a few media queries that could be needed. I read somewhere during US Election last year, that Obama’s website was supposedly accessible and optimized for practically every mobile device in existence so I decided to have a look at the code and these are the media queries I found

    @media(-webkit-min-device-pixel-ratio:2){}
    @media(min-width:0){}
    @media(min-width:480px){}
    @media(min-width:480px) and (max-width:767px){}
    @media(min-width:768px){}
    @media(min-width:768px) and (max-width:960px){}
    @media(min-width:960px){}
    @media(min-width:980px){}
    @media screen and (min-width:960px){}
    @media screen and (min-width:1200px){}
    @media screen and (min-width:1920px){}

    What’s interesting about this (that also concerns your question) are the 960 and 980 breaks and everything going on between 767 and 980 (which is tablet territory). And you can count the number of unique media queries that are being triggered here

    ====================

    All version of iPad

    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px) { /* Put CSS in Here */}

    iPad Landscape only

    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape) { /* Put CSS in Here */}

    iPad Portrait only

    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait) { /* Put CSS in Here */ }

    You can see the other dozen or two http://stephen.io/mediaqueries/#iPad here as well as iPhone and iPad Mini and Retina Targeting.

    Thanks,

    Nick

    #122555

    Great thanks!

    #122556

    Sure. Enjoy the theme.

    Nick

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Help needed with triggering media query/menu layout for Ipad in landscape.’ is closed to new replies.