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, 2 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:

    <a href="http://www.studiopress.com/forums/users/media/" rel="nofollow">@media</a> 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

    #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.