CSS-shifted header text looks good on Mac but wrong on iPhone (Suburbia theme)

• 

  cullygrove · Member · Mar 15, 2014 at 3:03 am

  • Copy link
  • Add topic to favorites

  Hi there,

  I used the code below to shift “A one-stop source…” from the (standard) right side of the Header to the bottom-left portion of the header. It looks good on my Mac’s browser, but messes up viewing on the iPhone (and perhaps iPad). Any tips on how to resolve this issue?

  Thanks,
  – Eli

  #site-description {
  margin: 0;
  position: absolute;
  top: 60px;
  left: 220px;
  width: 300px;
  }

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

• 

  designsimply · Member · Mar 15, 2014 at 4:34 pm

  • Copy link

  You can prevent your custom CSS from affecting the mobile theme by going to Appearance > Customize > CSS and un-selecting the option that says, ” Include this CSS in the Mobile Theme.”

• 

  cullygrove · Member · Mar 15, 2014 at 7:29 pm

  • Copy link

  This isn’t the ideal solution because we have other CSS code that no longer carries through to the iPhone. But as a trade-off, this approach is definitely better than what we had before. So thanks – and we’ll call this ‘problem solved’.

  – Eli

• 

  designsimply · Member · Mar 15, 2014 at 9:59 pm

  • Copy link

  If you want to apply the other CSS to the mobile theme, you could turn the “Include this CSS in the Mobile Theme” setting back on and then add a new rule to the bottom of your current custom CSS to adjust the site description in the mobile theme after the other adjustment has been made (basically, use an extra rule to put it back to the way it was.

  Here’s an example to get you started:

  .mobile-theme #site-description {
       /* put css here to make changes to the site description in the mobile theme only */
  }