🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] Hide text in a widget on mobile

Home Forums Support Hide text in a widget on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1161081
    Joseph

    So I have a topbar on a website, based off of the Artisan theme. In the top bar is my company phone number. On Mobile, I would like to somehow add the text “Click To Call” to the phone number. But only on mobile.

    Is there an elegant way to do this? Either CSS to only show on mobile, or two different widgets, one shown on mobile only, the rest on tablets and PCs?

    #1161089
    David
    Staff
    Customer Support

    Hi there,

    you can use the hide-on-* classes:

    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    For example:

    <span>I show everywhere</span>
    <span class="hide-on-desktop hide-on-tablet">But i only show on mobiles</span>
    #1162295
    Joseph

    Hi. That link sends me to instructions to add custom classes to menu items. But this is the top bar. Can it be done inline? This is my current code

    <p class="topbar" style="text-align: left;">CLICK TO CALL 24/7 <i class="fa fa-phone" aria-hidden="true"></i><a href="tel:18888888888"> (888) 888-8888</a></p>

    #1162297
    Joseph

    Well, I tried this, and it’s working. Let me know if there is something I should still change?

    <p class="topbar" style="text-align: left;"><span class="hide-on-desktop hide-on-tablet">CLICK TO</span> CALL 24/7 <i class="fa fa-phone" aria-hidden="true"></i><a href="tel:888888888"> (888) 888-8888</a></p>

    #1162341
    David
    Staff
    Customer Support
    #1162372
    Joseph

    Thanks!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.