CODEWITHSUNDEEP
cssmobile
james
james

Reputation: 73

How to Show Div on Mobile Only and Hide from Desktop

Using wordpress: How would I show the particular div on mobile and hide it on desktop users i tried the following:

.element {display:none;}

@media screen and (max-width: 600px) {
.element{ display: inline;}
}

I tried the code here and it works: http://jsfiddle.net/m8yh9nL5/ but when using it on wordpress its not working.?

thank you for the help.

Upvotes: 1

Views: 2244

Answers (3)

Yababaa
Yababaa

Reputation: 577

It is a bit late, but hey it worked for me. I had the exact same issue. Wrote a similar snippet which worked outside wordpress. But when I wanted to use it in Wordpress it didn't work (I still don't know WHY) however I fixed it by adding !important after the display: none etc.

For example:
display: none !important;

Hope this works for you.

Upvotes: 1

Cheezy Code
Cheezy Code

Reputation: 1715

Try:

    window.onresize = function()
    {
       if(document.body.clientWidth < 600)
       {
           //Code to hide your element
       }
    }

Upvotes: 0

Luca
Luca

Reputation: 1826

what does the markup of your wordpress site looks like?

Have you included the meta tag: 

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

Upvotes: 0

Related Questions