Jump to content

Change CTA link in mobile view

Recommended Posts

  • Replies 3
  • Views 556
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Image from iOS.jpg

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.