CODEWITHSUNDEEP
cssmobiledesktop
Manish Gaur
Manish Gaur

Reputation: 145

How to apply css only for desktop view in wordpress

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

Upvotes: 3

Views: 16474

Answers (3)

Deepak Kumar
Deepak Kumar

Reputation: 355

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  }
}

Upvotes: 5

vj.madamala7
vj.madamala7

Reputation: 109

Use css media queries for desktop device only example:

Desktop
@media only screen and (min-width: 1200px) and (max-width: 1920px) { .classname{width:250px}
}

here goes links for desktop and mobile media queries Media Queries: How to target desktop, tablet and mobile?

Upvotes: 0

Austin Jones
Austin Jones

Reputation: 709

Use media queries. Decide a minimum width for your desktop view. It should look something like this.

    @media only screen and (min-width: 1000px) {
   /* Css for Desktop goes here like sample below*/
     .desktop-header{height:100px;}
    }

Remember you need to use min if you only want to change elements for your desktop view, this means all widths equal to or beyond the pixels you choose. Also you need to use

<meta name="viewport" content="width=device-width, initial-scale=1">

in the head of your html to be responsive. *Note beyond media queries you would have to use a type of agent detection, this will see what platform the user is on based off of the browser and serve up content based on that, but I do not recommend this method.

Upvotes: 0

Related Questions