Community Forums › Forums › Archived Forums › Design Tips and Tricks › Remove Responsive on iPad view
- This topic has 8 replies, 2 voices, and was last updated 11 years, 2 months ago by SoZo.
-
AuthorPosts
-
January 29, 2013 at 11:11 pm #16322beautyfoolMember
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,
ReneeJanuary 29, 2013 at 11:13 pm #16323SoZoMemberSure, 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
January 29, 2013 at 11:23 pm #16324beautyfoolMemberHi SoZo, thanks for your response.
Sorry I am totally new to do... which code would that be?
Thanks,
Renee
January 29, 2013 at 11:29 pm #16325SoZoMemberActually, 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:
@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; } }
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
January 29, 2013 at 11:38 pm #16329beautyfoolMemberHi 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
January 29, 2013 at 11:47 pm #16331SoZoMemberYou 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
January 30, 2013 at 12:13 am #16333beautyfoolMemberHi SoZo,
It worked perfectly! Thanks so much for your time. 🙂
Renee
January 30, 2013 at 12:17 am #16334beautyfoolMemberSorry 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
January 30, 2013 at 11:25 am #16420SoZoMemberDoes it work to change it to 768?
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.