DEV Community

loading...

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

desertlion
・1 min read

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

Discussion (0)