Button to only appear on mobile site not desktop site

Community Forums Forums General Discussion Button to only appear on mobile site not desktop site

This topic is: not resolved

Tagged: ,

This topic contains 3 replies, has 3 voices, and was last updated by  cdils 1 year, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #31503

    jz9521
    Participant

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

    #31737

    cdils
    Participant
    Post count: 421

    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 Genesis-focused podcast called Genesis Office Hours. I tweet @cdils.

    #31815

    Dream Ideation
    Participant
    Post count: 1

    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!

    #31820

    cdils
    Participant
    Post count: 421

    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 Genesis-focused podcast called Genesis Office Hours. I tweet @cdils.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.