[Resolved] Hide text in a widget on mobile

[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?

[David]

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>

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

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

[David]

That is correct 🙂

[Joseph]

Thanks!

[Author]

Posts