DEV Community

desertlion
desertlion

Posted on

4 1

Remove Widget's Call to Action Button Label for Mobile view

In this 3rd part, we'll remove the label of our widget's call to action button to save more screen space. A mobile device has a narrow screen width and the label make the screen looked cramped.

There's an option to remove it from the widget builder page of the [Qiscus ][https://www.qiscus.com] Multichannel Integration Page. But It'll affect both web and mobile view.
Widget Builder

If we only want to remove the label on mobile view, we can do it with the help of CSS Media Query as described in this interactive screencast.

Or if you're in a hurry just copy and paste this code snippet:

<style>
@media (max-width:600px) {
   .qcw-cs-trigger-button div, .qcw-trigger-btn div {
      display: none;
   }
}
</style>

The following is an example if the widget is accessed from the browser
web view

And if the widget is accessed from a mobile browser, the label is hidden
mobile view

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay