CTA Button - different action for mobile device and for laptop screen

Hi, I’m new to Wordpress web development and I am totally amazed by the fantastic support you guys offer for the Sydney Theme - I have made many many corrections based on your forum contributions. Thank you so much.

The question I have relates to the main slider CTA (call to action) button. I’d like it to read ‘Call Us’ if the website is being viewed on a mobile phone, with the action being to dial a specific phone number. If the website is viewed on a laptop then I’d like the CTA button text to be ‘Contact Us’ with the action being to take the user to a Contact Details page.

I have managed to create 2 CTA buttons for the main page (following info from other forum posts), and I am currently presenting BOTH a ‘Call Us’ and a ‘Contact Us’ button - the ‘call us’ obviously doesn’t do very much on a desktop computer :). I’d like to either hide one of these depending on the screen size (device) being used, or I’d like to re-do as a single button which contained conditional logic.

Can you please help?

Thanks in advance.

Hi,

Can you share your site URL here?

Regards,
Awan

it’s trythisdemo.xyz

regards

Hi,

Thank you. Here is the CSS code to manage your button:

.slide-inner .button-slider:nth-of-type(1){
	display:none;
	width: 50%;
	margin: 0 auto;
}
@media only screen and (max-width: 767px) {
	.slide-inner .button-slider:nth-of-type(1){
		display: block;
	}
	.slide-inner .button-slider:nth-of-type(2){
		display: none;
	}
}

Regards,
Awan

That worked a treat! Thanks Awan - you guys are so helpful. I’ve learned so much from this forum. Excellent - best decision I made was opting for the Sydney Theme!

Great! Happy to help :slight_smile:

Feel free to ask another question if you have by creating new post in this forum :slight_smile: