Disable Widgets In Mobile Version

• 

  stuartdelony · Member · Nov 2, 2012 at 10:33 pm

  • Copy link
  • Add topic to favorites

  Is there a way (through CSS or otherwise) to disable widgets in the mobile version of your website?

  Thanks!

  The blog I need help with is http://www.lumenchurch.com

  (main theme:Oxygen)

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

• 

  iamtakashi · Staff · Nov 6, 2012 at 2:28 am

  • Copy link

  @stuartdelony,

  You are using the mobile theme and you won’t be able to modify the CSS even with Custom Design upgrade.

  The main theme, Oxygen is optimized for small screen devices and you are abe to modify the CSS with the upgrade.

  You can disable the mobile theme by going Appearance -> Mobile. Once you disabled the mobile theme and subscribed the upgrade, you can hide widgets with CSS media queries.

  This is just an example and you will need to adjust the query to target devices you want to hide widgets for.

  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#secondary,
#tertiary {
display: none;
}
}

  There are lots of info about media queries on the Web and here are some of them.
  http://www.w3.org/TR/css3-mediaqueries/
  http://webdesignerwall.com/tutorials/css3-media-queries

  Hope it helps.

• 

  stuartdelony · Member · Nov 6, 2012 at 2:59 am

  • Copy link

  Thanks so much!