Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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:
Please let me know whether it works.
Kind regards,
Diego
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.
@CeylonThreads
kindly share your site preview link so,
I can solve it.
Thank You.
thanks for url bt your store is password protect
Store url : ceylonthreads.com
Password : prawnzypie
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.
I cant find theme.scss file , where can i find it?
https://8wxvbqy4d00c5jej-59254669518.shopifypreview.com
nothing has changed it looks the same on mobile
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:
Please let me know whether it works.
Kind regards,
Diego
Perfect! It worked! thank you so much for your help 😄
@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?
can you please share store url
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;}
}
Thank you, it shows, but still placed down below.
Hi, is there any other solutions?
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
found solution thanks
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?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024