Responsive theme displaying "mini" version of site on iPhones.

• 

  supernovia · Staff · Nov 2, 2015 at 10:36 pm

  • Copy link

  Thanks. Can you try temporarily removing your CSS to see whether that does the trick?

• 

  andrea100sec · Member · Nov 3, 2015 at 8:39 pm

  • Copy link

  Yes, that did make the mobile version appear on the phone, but of course took away all our formatting changes :(

• 

  supernovia · Staff · Nov 3, 2015 at 9:00 pm

  • Copy link

  Hi @andrea100sec, I recommend “commenting out” one section of your CSS at a time using /* before and */ after one section at a time until you can find the offending lines.

  Once you’ve found them, you’ll likely want to specify some rules — for example, only use that CSS at certain screen widths.

• 

  andrea100sec · Member · Nov 3, 2015 at 9:52 pm

  • Copy link

  Thanks I will definitely try this. Is there a certain screen width I should use for thing to affect only (and all) mobile phone? Right now our mobile edits are as follows:

  @media only screen and (max-width: 480px) {
  #main, .entry-content {
  padding-top: 5px;
  margin-top: -10px;
  margin-bottom: 0;
  padding-right: 10px;
  padding-left: 10px;
  }

  .blog .site-content-inner {
  margin-top: 15px;
  padding-right: 10px;
  padding-left: 10px;
  }
  }

  .search-toggle {
  color: #000000;
  background-color: #FFFFFF;
  background-image: none;
  }

  @media only screen and (max-width: 480px) {
  .home .entry-content {
  padding-top: 20px;
  }

  .site-branding {
  padding-top: 5px;
  padding-bottom: 5px;
  }

  .site-header {
  padding: 5px;
  padding-top: 15px;
  padding-bottom: 5px;
  width: ;
  }

  .search-toggle {
  position: relative;
  top: -30px;
  }

  .menu-toggle {
  top: -7px;
  }
  }

• 

  supernovia · Staff · Nov 3, 2015 at 11:08 pm

  • Copy link

  The narrowest screen specified in your theme’s stylesheet is 600px. Does that help?

• 

  andrea100sec · Member · Nov 3, 2015 at 11:10 pm

  • Copy link

  Should I be changing the mobile max-width to 600? Or should I be using min-width in that space? I’m pretty new to all this so thank you for your help and sorry if it is a goofy question!

• 

  supernovia · Staff · Nov 3, 2015 at 11:18 pm

  • Copy link

  You can view your theme’s stylesheet here, for what it’s worth. It’s specifying special styles for min-width: 600px. If you want to apply a style when the screen is at least 600px, you would use that. If you want it applied for smaller screens than that, you’d use max-width: 599. And so on.

  Honestly though, the easiest way to troubleshoot this is to remove one section at a time so you can determine which one is giving you trouble. Have you determined that yet?

  And if you haven’t seen it already, the customizer does have preview options for phones and tablets. They’re the icons near the bottom of the customizer screen.

• 

  andrea100sec · Member · Nov 3, 2015 at 11:31 pm

  • Copy link

  Awesome thank you I will give it a try! When we view it on the WordPress customizer for a phone everything looks as it should, but its when we try it on my bosses iPhone that we have problems (it does the “mini” version).

  I will try removing different sections to find the spot that is the culprit.

  Thanks again!

• 

  supernovia · Staff · Nov 4, 2015 at 12:25 am

  • Copy link

  Thank you! And if you can find the offending section and can’t sort it out, post the code here. We may be able to come up with some ideas.