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?
User | RANK |
---|---|
169 | |
152 | |
70 | |
46 | |
34 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023