hide widgets mobile

• 

  manifest828 · Member · Oct 22, 2018 at 8:02 pm

  • Copy link
  • Add topic to favorites

  I want to use CSS to hide all widgets from mobile, and then below it add exceptions. What am I doing wrong?

  
  @media screen and (max-width: 800px) {
  .widget {
  display: none;
  }
  }

  
  @media screen and (max-width: 800px) {
  .widget #custom-html-31 {
  display: block;
  }
  }

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

• 

  gemmacevans · Member · Oct 23, 2018 at 10:48 am

  • Copy link

  Hi manifest828,

  I’ll be happy to look at this with you. Can you send me a list of the widgets you wish to hide on mobile?

  I think hiding the widgets you don’t need (rather than hiding them all to start with) will be the best way forward. Just let me know which widgets you are referring to and I’ll look at some CSS :)

• 

  manifest828 · Member · Oct 23, 2018 at 11:39 am

  • Copy link

  I appreciate your willingness to help. However, I have 58 widgets (appearing and disappearing on various pages–visibility). Using CSS I could list them one at a time and use display:none, but I thought there might be an easier way by hiding them all first, and then only choosing the 3-5 I want to make visible on the mobile. I hope that makes sense :)

• 

  staff-zinnia · Staff · Oct 23, 2018 at 5:21 pm

  • Copy link

  Hi –

  wow, that’s a bunch of widgets. CSS is not going to be the ideal solution for this. I think you’d be better off making a child theme for the mobile scenario.

  Are you working on https://manifest828.com/ or a different site? Just wanted to confirm that detail as well.

  Don’t forget that you can reach our live chat support team 7 days per week via https://wordpress.com/help/contact/ Let me know if you aren’t able to connect with us there.