How to fix the large button in the slider on mobile (Debut Theme)

Solved
New Member
4 0 0

Hi,

 

Everything is working out fine expect for the fact that the (go to product) button on my slider on the homepage is weirdly placed and huge on mobile. Is there any code or solution to get this button in the correct place just like on desktop version? The problem is shown in the attached screenshots...

Schermafbeelding 2019-10-07 om 22.29.43.pngMobile...Schermafbeelding 2019-10-07 om 22.29.16.pngDesktop

0 Likes
Shopify Partner
41 1 26

Hi,

Posting your store link will help answering your question 

Developer of PixPix Image Editor Shopify app
0 Likes
New Member
4 0 0
Shopify Expert
665 170 199

Hi, @rick777 ,

This is Evita from On The Map.

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in the bottom of the file.

 

@media only screen and (max-width: 749px) {
  .slideshow__text-wrap--mobile {
      background-color: transparent!important;
  }
 .slideshow__btn--mobile {
    margin: 0!important;
  }
}

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
4 0 0

Hi @OTM ,

 

Thank you for the help. It looks way better now. The button is still below the slider instead of on the sliders just like on desktop. But this will do.

 

 

0 Likes

Success.

Shopify Expert
665 170 199

You can add this: 

 

@media only screen and (max-width: 749px) {
.slideshow__btn--mobile {
position: relative;
top: -90px;
}
}

 

 

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
4 0 0

Thanks allot!!

 

0 Likes
New Member
1 0 0

Hi I am experiencing the same problem here with my desktop and mobile button layout.  Is it possible to make the mobile layout the same as desktop. With the (SHOP OUR FIRST LAUNCH) button in the middle of the background image.

 

Have tried this solution and adding the code to my ASSET ---> {/}styles.scss.liquid but it doesnt work for mine.

My website doenst have {/}theme.scss.liquid so i am guessing it is {/}styles.scss.liquid

 

https://www.unrvldathletics.com/

Password: prelaunch01

 

Please let me know if you have a solution to this thank you.

desktop.jpgDesktop (SHOP OUR FIRST LAUNCH BUTTON) is in the middle of background imagemobile.jpgMobile (SHOP OUR FIRST LAUNCH) button is moved below with a giant white padding.

0 Likes