Hiding Suits theme sidebar and mobile

• 

  btinker · Member · Feb 22, 2014 at 1:19 am

  • Copy link
  • Add topic to favorites

  Hi, I’m trying to hide the blog page side be on the suits theme. I’ve used the following css:

  #sidebar {
  	display: none;
  }
  
  #content {
  	width: 960px;
  }
  
  #content .entry.page {
  	width: 940px;
  }

  This works fine except it makes the screen too wide mobile devices. How can I make mobiles ignore it? An help much appreciated.

• 

  btinker · Member · Feb 22, 2014 at 10:56 am

  • Copy link

  If it helps someone, here it is:

  #sidebar {
  	display: none;
  }
  
  .site-main .content-area {
  	width: 100%;
  }

• 

  designsimply · Member · Mar 1, 2014 at 10:14 pm

  • Copy link

  You can target mobile devices using media queries. Here is a guideline:
  http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

  So, if you wanted to limit your example above to only wide screens, for example, you could wrap it in a media query like this:

  @media screen and (min-width: 960px) {
      /* put your css here */
  }

  And if you wanted to limit to mobile only, you would use min-device-width instead of min-width, but I think min-width would work fine for the scenario you described.