How to apply css only for desktop view in wordpress

Question

I working on a website which has vertical navigation menu on left side. now i have to reduce the width of navigation menu but when i reduce width with normal css for desktop view it also affect the mobile view, it also reduce the width in mobile view. So is there any other solution from which the css should apply only for desktop view. it should not affect the mobile view menu header. Thanks

Solution

How to apply css only for desktop view in wordpress.

1.) desktop view media queries. 

@media only screen and (min-width:768px){
   here your code ...
}

@media only screen and (min-width:910px){  <!-- wordpress. twentysixteen theme -->
   here your code ...
}

================================================

How to apply css only for Mobile view in wordpress.

@media only screen and (max-width:767px){
   here your code ...
}

@media only screen and (max-width:909px){  <!-- wordpress. twentysixteen theme -->
   here your code ...
}

===============================================

/* saf3+, chrome1+ */ you have any problem chrome, and safari, mobile view and desktop then use below this media

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

Comments

[Manish Gaur]

i need to know css for desktop view only.. please tell me about that