Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive doesn't fit tablet – Executive Pro
- This topic has 7 replies, 2 voices, and was last updated 9 years, 6 months ago by swdesigner.
-
AuthorPosts
-
September 21, 2014 at 8:53 pm #125244swdesignerMember
I have spent MANY hours trying to resolve this and would appreciate any help, especially from responsive wizards!
I can't get this site to display full width on a tablet: http://dev.add2.addesignusa2.com/
If I use the responsive CSS built into Executive, it breaks the site.
I know that @media only screen and (max-width: 1200px) { targets the tablet. But every setting I've tried to shrink the width and contents proportionally doesn't work. The site looked perfect on an iPad before I enabled the responsive CSS and code in functions.php.
In order to keep the integrity of the layout (before responsive was enabled) I used:
body {
min-width: 1200px;
}That kept everything displaying like the desktop version. I have the other mobile responsive sizes working.
I wish there was a way of totally bypassing responsive on tablets since they seem to do a great job of displaying sites, about as good as the desktop version.
Any help greatly appreciated! Thanks.
http://dev.add2.addesignusa2.com/September 22, 2014 at 1:53 am #125264Ben @ Inbound CreativeMemberIn your first media enquiry, you've added a condition to the body. It's set to force a minimum width of 1200px when the site has a max-width of 1200px. That means it'll force the width to be wider than the screen itself.
@media only screen and (max-width: 1200px) { body { min-width: 1200px; } .site-container { max-width: 1200px; } }
Either remove it (it isn't necessary) or change it to be max-width (as below):
body { max-width: 1200px; }
That should solve your problem.
September 22, 2014 at 8:43 am #125312swdesignerMemberHi Ben,
Thanks for the reply.
If I take out the min-width of 1200px, the site structure falls apart. I changed it to max-width, so you can see what happens.
Since the site displayed fine on tablets before the responsive code was added, I'm trying to find a way to get back to that without having to write a lot of CSS for the tablet view.
I'm hoping there's a solution!
September 22, 2014 at 9:08 am #125315Ben @ Inbound CreativeMemberThe best way to resolve the issue is to make the rest of the site responsive.
Otherwise, you'd need to look into removing the viewport size line in the functions.php file.
September 22, 2014 at 9:34 am #125321swdesignerMemberI think it would take a lot of time to make the tablet view responsive at this point. I worked on it for a while, but it seemed like it would take too many hours, especially when the site was working perfectly on tablets before responsive was enabled.
I wish I knew how to remove the viewport size from the functions.php file. It doesn't list sizes, just adds the tag capability:
//* Add viewport meta tag for mobile browsers
add_theme_support( 'genesis-responsive-viewport' );That's what's so puzzling -- if the tablet @media size is left out of the CSS, the site still falls apart.
Looked at your site, by the way, very nice work!
September 22, 2014 at 9:40 am #125322Ben @ Inbound CreativeMemberIf you remove the genesis responsive viewport, that should stop the site from resizing. It'll mean it won't be responsive and might be hard to read on some devices, but it should solve the issue you're currently dealing with.
And thanks!
September 22, 2014 at 9:46 am #125323swdesignerMemberOriginally I wasn't planning on the site being responsive, but it was hard to view on phones, so I added the responsive capability for phones and it reads much better now. Not wanting to lose that!
September 22, 2014 at 11:09 am #125332swdesignerMemberI added this to the HTML: <meta name="viewport" content="initial-scale=1/">
and this to the CSS:
@media only screen and (max-width: 1200px) {@viewport{
zoom: .85;
width: 85%;
}But it's not affecting the iPad view. If I change initial-scale to .85 in the HTML it looks like it used to on the iPad. But makes the phone view smaller too.
Anybody have more light to shed?
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.