Hide Primary sidebar contents for mobile devices

• 

  superiordiocese · Member · Jun 24, 2014 at 2:25 pm

  • Copy link
  • Add topic to favorites

  I have the twenty fourteen theme and when using mobile devices prevent the primary sidebar from showing. Right now it appears at the bottom of the page when scrolling). However, I would like to keep it for larger screens (where it shows on the left side of page).

  Can someone please help me with this?

  http://catholicdosnews.org/

  Thanks…

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

• 

  designsimply · Member · Jun 24, 2014 at 3:23 pm

  • Copy link

  To hide things only for small screens, you can use a media query. I see you’ve tried adding some in your custom CSS but some of the syntax is wrong. For example. I noticed that you have a line like this in your custom CSS right now:

  media="all"

  And that syntax is incorrect for a media query.

  Here is a help page I would recommend checking out first so that you have a good base knowledge for how they work:
  http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  And here is an example that uses a media query to hide the primary sidebar in the Twenty Fourteen theme for screens that are 768px wide or smaller:

  @media screen and (max-width: 768px) {
  	#primary-sidebar {
  		display: none;
  	}
  }

  You can adjust the 768px value as needed.

  Be careful to make sure the syntax of your other CSS is correct before adding the new CSS though. If there is broken or improperly nested CSS, then new CSS you save may not work as expected.

  The direct input tab at http://jigsaw.w3.org/css-validator/ may help you.

• 

  superiordiocese · Member · Jun 24, 2014 at 5:17 pm

  • Copy link

  thanks.