Change the position of slider button on narrative theme

Store Design
1

Hi,

I need to change the position of the CTA button on the slideshow image for mobile view. Currently it’s overlapping with the content on mobiles and I need to reposition the same. Any advice is much appreciated?

Thanks in advance.

2

@Rags

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Site url is www.beardandgroom.in

4

@KetanKumar

Site url is www.beardandgroom.in

5

@Rags

yes please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (max-width: 749px){
.slideshow__button-cta-single {transform: translateX(-50%) translateY(calc(40% - 15px));}
}
6

@KetanKumar Thanks for the code. I copied the code as instructed on the asset file and it did change the position of the CTA button on mobile as required. However, when I clicked on the button, it does not take me to the linked page. The button has become inactive for some reason.

Edit 1: The button is active but I need to click slightly below the button for it to take me to the desired page. If I click on the button, it doesn’t work.

Edit 2: I tweaked the code to the below so the button fir inside the slider and now its working fine.

@media only screen and (max-width: 749px){
.slideshow__button-cta-single {transform: translateX(-50%) translateY(calc(10% - 190px));}
}

7

@Rags

great thanks for update