Solved

Debut Theme Slideshow -SHOP NOW' Button Mobile

CeylonThreads
Tourist
8 0 2

Hi I need some help with my debut theme code.

The version on my laptop seems fine but when i look at it through mobile my 'Shop Now' Button on my Landing page slideshow is below the image. Which i find very odd and annoying!
Please can someone help me out here?

Thank you

Accepted Solution (1)
diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@CeylonThreads, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

@media (max-width: 749px){
    .slideshow__btn{
    display: inline-block !important;   
    margin: 0 auto;
    text-align: center;
}

.slideshow__text-content--mobile{
    display: none !important;
}

.slideshow__btn-wrapper{
    text-align: center !important;
}

.index-section--slideshow{
    margin-bottom: -30px;
}
}


This is how it will look like on mobile:

diego_ezfy_0-1631964142742.png

 



Please let me know whether it works.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 22 (22)

KetanKumar
Shopify Partner
36839 3635 11972

@CeylonThreads 

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

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

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
CeylonThreads
Tourist
8 0 2
My site isn't published yet, but I am still doing it. I have attached a
picture for your reference on how it looks on the laptop and on the
iphone.

[image: WhatsApp Image 2021-09-16 at 6.11.59 PM (1).jpeg]
Zworthkey
Shopify Partner
5581 642 1565

@CeylonThreads 
kindly share your site preview link so,
I can solve it.
Thank You.

CeylonThreads
Tourist
8 0 2
Zworthkey
Shopify Partner
5581 642 1565

@CeylonThreads 
Share your store password.
Thank You.

KetanKumar
Shopify Partner
36839 3635 11972

@CeylonThreads 

thanks for url bt your store is password protect 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
CeylonThreads
Tourist
8 0 2
my password is prawnzypiee
CeylonThreads
Tourist
8 0 2

Store url : ceylonthreads.com

Password : prawnzypie

Zworthkey
Shopify Partner
5581 642 1565

hii, @CeylonThreads 
Paste this code on top of the theme.scss file.

@media only screen and (max-width: 749px){
.page-width {
    margin-top: -200px !important;
}
}

Thank You.

CeylonThreads
Tourist
8 0 2

I cant find theme.scss file , where can i find it?

CeylonThreads
Tourist
8 0 2

https://8wxvbqy4d00c5jej-59254669518.shopifypreview.com

 

nothing has changed it looks the same on mobile

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@CeylonThreads, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

@media (max-width: 749px){
    .slideshow__btn{
    display: inline-block !important;   
    margin: 0 auto;
    text-align: center;
}

.slideshow__text-content--mobile{
    display: none !important;
}

.slideshow__btn-wrapper{
    text-align: center !important;
}

.index-section--slideshow{
    margin-bottom: -30px;
}
}


This is how it will look like on mobile:

diego_ezfy_0-1631964142742.png

 



Please let me know whether it works.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

CeylonThreads
Tourist
8 0 2

Perfect! It worked! thank you so much for your help 😄

Glb_ag
Excursionist
14 0 4

@diego_ezfy Hi, I am facing the same issue and tried this solution, but it didn't work.

The shop now button completely disappeared. Is there any solution I can try?

KetanKumar
Shopify Partner
36839 3635 11972

@Glb_ag 

can you please share store url 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Glb_ag
Excursionist
14 0 4
KetanKumar
Shopify Partner
36839 3635 11972

@Glb_ag 

yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

@media (max-width: 749px) {
.slideshow__btn {top: 70px;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Glb_ag
Excursionist
14 0 4

Thank you, it shows, but still placed down below. 

Glb_ag
Excursionist
14 0 4

Hi, is there any other solutions?

catalienne
Excursionist
22 1 6

Hi Diego.

This code worked well however the button is smack bang in middle of the images for mobile.

Any chance I can have the button either bit further down in the center or bottom left similar to desktop? 

Thanks

catalienne
Excursionist
22 1 6

 

found solution thanks

Glb_ag
Excursionist
14 0 4

Hi Catalienne I have same problem with you. I want to move the button to the bottom. Can I ask you how you solved it?