How can i remove widgets on moible view

• 

  pkboppana · Member · Jul 8, 2015 at 10:03 am

  • Copy link
  • Add topic to favorites

  Hi,

  I’m struggling to remove the sidebar widgets on mobile view. When on a phone all the sidebar widgets are moved to the bottom and it makes scrolling a nightmare.

  Can anyone help.

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

• 

  njcrane · Member · Jul 8, 2015 at 10:48 am

  • Copy link

  Hi pkboppana

  If you have WordPress.com Premium or WordPress.com Business you can edit the CSS of your blog, it’s all explained under Editing CSS

  To hide the sidebar, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  media="all"
  @media only screen and (max-width: 767px)
  .container.sp_sidebar #sidebar {
   display: none;
  }

  This will hide the whole sidebar. You could target specific widgets if desired, if you would prefer to hide specific widget, let me know and I can assist you further.

  If you don’t have the ability to edit CSS we will need to see whether we can do this via your theme. What theme are you using?

• 

  pkboppana · Member · Jul 8, 2015 at 10:55 am

  • Copy link

  Thankyou for getting back .

  I’ve tried the code above and it seems to have not done anything.
  I’m using Hemlock theme – which is built for wordpress.

• 

  njcrane · Member · Jul 8, 2015 at 11:14 am

  • Copy link

  Sorry, my mistake try

  @media only screen and (max-width: 767px)
  .container.sp_sidebar #sidebar {
   display: none;
  }

  Have you turned Include Custom CSS in the Mobile Theme on?

• 

  njcrane · Member · Jul 8, 2015 at 11:48 am

  • Copy link

  Sorry for the confusion, WordPress is removing
  display: none from the text window when you save it because of the first line of the code, ignore the first line of the code. Just enter

  .container.sp_sidebar #sidebar {
   display: none;
  }

  This should work now!

• 

  njcrane · Member · Jul 8, 2015 at 11:53 am

  • Copy link

  Sorry, I’d missed a curly bracket in the first attempt this will definitely work now, try

  @media only screen and (max-width: 767px) {
  	.container.sp_sidebar #sidebar {
  		display: none;
  	}
  }

  I’ve just tried this and it works!

• 

  pkboppana · Member · Jul 8, 2015 at 12:33 pm

  • Copy link

  The last piece worked like a charm!!

  Thanks a Million :D

• 

  njcrane · Member · Jul 8, 2015 at 12:37 pm

  • Copy link

  Sorry for all the confusion, we got there in the end!