Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change CTA link in mobile view


Renish

Question

  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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
  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...