Desktop only CSS

• 

  ajrobson · Member · Nov 14, 2014 at 12:40 pm

  • Copy link
  • Add topic to favorites

  I am trying to add CSS for desktop only

  I have tried:

  @media screen and (min-width: 601px) {
  .main-navigation ul li#menu-item-29 {
  width: 100px;
  }

  But nothing changes, can anyone help?

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

• 

  designsimply · Member · Nov 15, 2014 at 11:13 am

  • Copy link

  min-width: 601px is pretty small, so the rule you’re using above will affect any device that is 601px wide or bigger—that would include an iPad.

  Here are some pretty common break points for media queries to give you a better idea on widths:
  http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

  Note that not all themes use the same break points, so you should use that link above just to get an idea, and the very best thing to do is use the same break points your theme is using when making modifications because it will make it a TON easier to modify. You can do it with different break points, but if you run into layout problems because of it that means it would just take more time to work out why and apply custom fixes.

  So, next up! Here is the Motif theme’s default CSS file:
  http://s0.wp.com/wp-content/themes/pub/motif/style.css?m=1415810330g&minify=false

  The media queries are at the bottom. Looks like it has 5, here they are in a list:

  @media screen and (min-width: 1200px)
  
  @media screen and (max-width: 1010px)
  
  @media screen and (max-width: 767px)
  
  @media screen and (max-width: 600px)
  
  @media screen and (max-width: 362px)

  You don’t have to use all of them, but if you do use media queries, I would recommend matching the break points the theme uses. If you use them, you should put them in the same order the theme does.

  Back to your example. If you wanted to apply that example to desktop screens only, it would look like this:

  @media screen and (min-width: 1200px) {
  	.main-navigation ul li#menu-item-29 {
  		width: 100px;
  	}
  }

  Note that you’re example above is missing the trailing curly brace “}” for the media query section. Make sure to always close sections properly with curly braces or you will run into more problems.