Change CTA link in mobile view

Site URL: https://www.thrivelot.com/

Hi, wondering is there a way to change the hero section CTA text and link in mobile view in comparison to desktop view.

For example:

In desktop view the hero section CTA text is "Transform my yard" and links to http://thrivelot.com/link1

In mobile view the hero section CTA text to be changed to "Start my project" and links to http://thrivelot.com/link2 

Thanks,

Renish

On 7/15/2021 at 3:25 AM, Renish said:

Site URL: https://www.thrivelot.com/

Hi, wondering is there a way to change the hero section CTA text and link in mobile view in comparison to desktop view.

For example:

In desktop view the hero section CTA text is "Transform my yard" and links to http://thrivelot.com/link1

In mobile view the hero section CTA text to be changed to "Start my project" and links to http://thrivelot.com/link2 

Thanks,

Renish

Hi. You can add 2 sections, design button text, link. Then we will give the code to show 1 section on desktop, show 1 section on mobile

Thank you so much for the help. Since this is a live site if you can share the code it would be really helpful. I can implement it in one go. Also, would be kind enough, if you can include a code to reduce the vertical space by 25 px in mobile view as depicted in red box in the attached image.

Q1. Add this code to Design > Custom CSS. This code will show first section on desktop, & show second secion on mobile

/* Show first section on desktop */
@media screen and (min-width:768px) {
body.homepage article section:nth-child(2) {
	display: none;
}}
/* Show second section on mobile */
@media screen and (max-width:767px) {
body.homepage article section:nth-child(1) {
	display: none;
}
}

Q2. If you use above code, you will need to add it first, then I can check & give code