Button to only appear on mobile site not desktop site

[jz9521]

I use the Executive theme on my site which comes with shortcode for a button. I want to create a button that appear on the mobile version (will dial my phone # when clicked) but not the desktop version.
I want to use HTML code in the header right widget using only HTML and make the button so it is left justified.
1) Is it possible to do this just using html? If so, do you know the code that I would insert?
2)  If not, is the only way to do this using jQuery or CSS. If so, which is the best practice? If you know the code to do this, I would be grateful if you let me know it.
Thanks so much!!!!

[cdils]

Hi there,

You can use CSS with the display:none; property to hide the button on regular screens, then in your media queries, set it to show.

If you go ahead and add the button in on your site so I can see it, I can help you get the right CSS.

Thanks,

Carrie

---

Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. 🙂

I host a weekly WordPress-focused podcast called Office Hours. I tweet @cdils.

[Dream Ideation]

I added the CSS property to my site to hide the mobile button on regular screens. How do I get it to appear in a media query?

Thanks!

[cdils]

Add display: inherit; to that element on whatever media query section (screen size) you want it to start showing on.

I think that should do it. If not, here are other values for the display property you could try:

http://www.w3schools.com/cssref/pr_class_display.asp

Cheers,
Carrie

---

Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. 🙂

I host a weekly WordPress-focused podcast called Office Hours. I tweet @cdils.

[Author]

Posts