Remove Responsive on iPad view

Community Forums Forums Design Tips and Tricks Remove Responsive on iPad view

This topic is: not resolved

This topic contains 8 replies, has 2 voices, and was last updated by  SoZo 1 year, 5 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #16322

    beautyfool
    Participant
    Post count: 4

    Hi everyone, I was wondering if someone could help me with my theme (Mindstream). My blog is over at http://www.beautyfool.com. I absolutely love the mobile responsive theme, however I was wondering if just for the iPad; can it be kept to “normal”. So that on a laptop and iPad it will look normal, and anything smaller than that – other tablets and cellphones – it will move to the responsive theme.
    Thank you very much,
    Renee

    #16323

    SoZo
    Moderator
    Post count: 1573

    Sure, just remove the responsive section of the style sheet that corresponds with the iPads resolution.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #16324

    beautyfool
    Participant
    Post count: 4

    Hi SoZo, thanks for your response.

    Sorry I am totally new to do… which code would that be?

    Thanks,

    Renee

    #16325

    SoZo
    Moderator
    Post count: 1573

    Actually, you’ll need to move all the rules you want from the @media only screen and (max-width: 1024px) section into the @media only screen and (max-width: 600px) section. So you end up with something like:
    [code]@media only screen and (max-width: 600px) {

    h1,
    h2,
    h2 a,
    h2 a:visited {
    font-size: 30px;
    }

    h3,
    h4 {
    font-size: 24px;
    }

    .five-sixths,
    .four-fifths,
    .four-sixths,
    .one-fifth,
    .one-fourth,
    .one-half,
    .one-sixth,
    .one-third,
    .three-fifths,
    .three-fourths,
    .three-sixths,
    .two-fifths,
    .two-fourths,
    .two-sixths,
    .two-thirds {
    padding: 0;
    width: 100%;
    }

    body {
    width: 100%;
    margin: 0 auto;
    }

    .archive-page,
    .content-sidebar #content,
    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .full-width-content.mindstream-landing #content,
    .full-width-content #content,
    .mindstream-landing .wrap,
    .sidebar,
    .sidebar-content #content,
    .wrap,
    #content-sidebar-wrap,
    #footer .creds,
    #footer .gototop,
    #footer-widgets .wrap,
    #header .widget-area,
    #sidebar-alt,
    #title-area {
    width: 100%;
    }

    .menu-primary,
    .menu-secondary,
    #footer .creds,
    #footer .gototop,
    #header ul.menu,
    #header .widget-area,
    #title-area {
    float: none;
    text-align: center;
    width: 100%;
    }

    .content-sidebar #sidebar .widget,
    .sidebar-content #sidebar .widget,
    #footer,
    #header {
    background: none;
    background-color: #222;
    }

    #header ul.menu {
    float: none;
    }

    #title-area {
    padding: 20px 0 10px;
    }

    #header .widget-area {
    padding: 0;
    }

    #header .searchform {
    float: none;
    padding: 0;
    text-align: center;
    }

    .menu-primary li,
    .menu-secondary li,
    #header ul.menu li {
    display: inline-block;
    float: none;
    }

    .menu li.right {
    display: none;
    }

    .menu li li {
    text-align: left;
    }

    #inner {
    padding: 20px 0 0;
    }

    .breadcrumb,
    .navigation,
    .sidebar .widget,
    .taxonomy-description {
    margin: 0 20px 20px;
    }

    #content {
    padding: 25px 0;
    }

    .full-width-content.mindstream-landing #content {
    margin: 0;
    }

    .full-width-content.mindstream-landing #inner {
    padding: 0;
    }

    .page .page,
    .post,
    #comments,
    #respond {
    padding: 0 20px;
    }

    .author-box {
    margin: 0 20px 40px;
    }

    #footer-widgets {
    margin: 10px auto 0;
    }

    #footer-widgets .widget {
    padding: 20px 20px 0;
    }

    #footer-widgets .wrap {
    padding: 0;
    }

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3 {
    margin: 0;
    }

    #footer .wrap {
    padding: 20px 0;
    }

    }[/code]


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #16329

    beautyfool
    Participant
    Post count: 4

    Hi SoZo,

    Thank you. I tried what you said (I copied the code from the max-width 1024 to max-width 600) but nothing has seemed to change.

    Renee

    #16331

    SoZo
    Moderator
    Post count: 1573

    You still have the original 1024 section in there. Replace all the responsive rules with what I posted above.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #16333

    beautyfool
    Participant
    Post count: 4

    Hi SoZo,

    It worked perfectly! Thanks so much for your time. :)

    Renee

    #16334

    beautyfool
    Participant
    Post count: 4

    Sorry one more thing…

    Now when the ipad is facing up (768px i think), my sidebar has been cut out.

    Should I just change the max width from 600 to 768 to fix this?

    Thank you!

    Renee

    #16420

    SoZo
    Moderator
    Post count: 1573

    Does it work to change it to 768?


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

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

You must be logged in to reply to this topic.