Konthy
October 14, 2019, 3:59pm
1
Hello everyone!
The slideshow and text overlay work fine in the desktop version but for the mobile version, the text is positioned below instead of within the slideshow.
Thank you!
I found a similar topic and someone suggested the code below but it didn’t work for me.
@media only screen and (max-width: 749px){
.slideshow__text-wrap--mobile{display:none;}
.slideshow__text-wrap--desktop .slideshow__subtitle{display:block; text-align: center;}
}
Can anyone please help? I have attached a picture below.
*** Is it also possible to move the slider below the slideshow pictures instead of overlapping with the slideshow pictures?
Thank you!
OTM
October 14, 2019, 6:38pm
2
Hi, @Konthy ,
This is Evita from On The Map.
The code did not work, because the class names are different than your store. Can you add your store URL?
Best,
1 Like
Case_1
October 15, 2019, 10:38am
4
Hello Evita,
I got the same issue with text and button in mobile version: https://www.case-o-rama-com.myshopify.com .
OTM
October 15, 2019, 11:00am
5
The password you sent me is incorrect.
Case_1
October 15, 2019, 11:08am
6
case-o-rama-com.myshopify.com
I already made some adjustments, but:
the main heading text is not displayed (only subtitle)
the Shop Now button is too close to subtitle
Please help
OTM
October 15, 2019, 11:15am
7
Hey @Case_1 ,
Add this code to assets/theme.scss.liquid file AT THE BOTTOM
@media only screen and (max-width: 749px) {
.slideshow__title, .slideshow__subtitle {
display: block!important;
}
.slideshow__btn-wrapper {
margin-top: 2rem;
}
}
1 Like
Case_1
October 15, 2019, 11:46am
8
Thank you, Evita, for helping me in resolving the issue!
This is the piece of code that solved my problem:
@media only screen and (max-width: 749px){
.slideshow__text-wrap–mobile{display:none !important;}
.slideshow__text-wrap–desktop .slideshow__title, .slideshow__subtitle{display:block !important; text-align: center !important;}
.slideshow__btn{display:block !important; max-width:120px; margin-left:auto; margin-right:auto; margin-top: 1rem;}
}
Konthy
October 15, 2019, 12:01pm
9
I sent you a new password. Sorry about that!
@OTM can you help me with my store? I’m having the same issue. sunnytop-shop.com password is sunnytop
@sunnytopshop ,
Please follow this tutorial , I believe it achieves exactly what you need.
Kind regards,
Hi @sunnytopshop ,
You can follow the instruction below:
Go to Online Store->Theme->Edit code
Asset->/theme.scss->paste below code at the bottom of the file:
@media (max-width: 749px) {
.slides__text-content--mobile {
display: none !important;
}
.slides__title {
display: block !Important;
}
.slides-text-content-wrapper-left,
.slides-text-content-wrapper-right {
width: 100% !important;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
1 Like
woohoo!! Finally it worked-thank you!! except I had a button on one of the slides disappeared on the mobile view
can you help me get the button on a slide to appear on the mobile version? www.sunnytop-shop.com pw to get in is sunnytop
Hi @sunnytopshop ,
You can follow the instruction below:
Go to Online Store->Theme->Edit code
Asset->/theme.scss->paste below code at the bottom of the file:
.slides__btn {
display: inline-block !important;
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
AMAZING, AMAZING, AMAZING - thank you so much!!!
