Display Message Button Based on Device Type

To ensure the Message Button in the WP SMS plugin appears only on specific devices (such as mobile or desktop), follow these steps to add custom CSS to your website. This guide will help you show the button on mobile devices and provide an example for displaying it only on desktop devices.

Steps to Show the Message Button Only on Mobile Devices

1. Go to Your WordPress Dashboard
2. Navigate to Appearance -> Customize
3. Click on the Additional CSS Section
4. Copy and paste the following code into the Additional CSS box:

.wpsms-chatbox {
	display: none !important;
}
@media only screen and (max-width: 600px) {
	.wpsms-chatbox {
		display: block !important;
	}
}

This code hides the Message Button on screens wider than 600px, typically tablets and desktops, and displays it only on mobile devices.

5. Click the Publish Button to Save Your Changes

Note: The 600px width is a common limit for mobile devices. Adjust it if needed for your specific requirements.

 Example: Show the Message Button Only on Desktop Devices

To display the Message Button only on desktop devices and hide it on mobile devices, use the following CSS code:

1. Follow steps 1-3 from above
2. Copy and paste the following code into the Additional CSS box:

.wpsms-chatbox {
	display: block !important;
}
@media only screen and (max-width: 600px) {
	.wpsms-chatbox {
		display: none !important;
	}
}

This code shows the Message Button on screens wider than 600px, typically desktops, and hides it on mobile devices.

3. Click the Publish Button to Save Your Changes

By adding these codes, you can customize the visibility of the Message Button to enhance the user experience on your website.

Need Further Assistance?

If you have any questions or need further help, please contact our support team. We’re here to assist you!