Mobile App Screen Width

• 

  benconners · Member · Feb 26, 2014 at 2:48 pm

  • Copy link
  • Add topic to favorites

  Hi guys,

  A while back you helped me widen my blog using custom CSS code, which worked great and really helped out its overall aesthetics/appearance. My only gripe is that after doing that, the blog no longer stretches across the entire screen when using the mobile version of the regular version of the site on a mobile phone. I was wondering if there is code to fix this width issue on the mobile app, while keeping the webpage/tablet versions the same.

  Any help would be much appreciated.

  Thanks!

  Ben

  The blog I need help with is: (visible only to logged in users)

• 

  hfzrhmn · Member · Feb 27, 2014 at 12:14 am

  • Copy link

  Hi there,

  I think the best solution is to edit your current Custom CSS a little bit. Make them like this:

  @media only screen and (min-width: 767px) {
      .wrap {
        max-width: 1100px;
      }
      #sidebar-primary {
        width: 27%;
      }
      #content {
        width: 70.5%;
      }
      img#header-image {
        width: 1100px;
      }
  }

  What it does, is to tell browsers that your previous custom CSS needs to only apply on larger screens (e.g. desktops), while keeping the old “stretch across the entire screen” effect for mobile screens.

• 

  benconners · Member · Feb 27, 2014 at 6:54 pm

  • Copy link

  Awesome that appears to have worked! Thank you!

• 

  hfzrhmn · Member · Feb 28, 2014 at 12:03 am

  • Copy link

  You’re welcome!