Debut theme - Slideshow text overlay in mobile

mmmaggieli
Excursionist
28 0 10

Hi, 

I am trying to get my photos in the slideshow to fill up the entire page on mobile with the text overlay as well as SHOP NOW overlay. Right now it's displayed underneath the text.

 

See pictures:

IMG-4833.png

I have tried the code below, but it does not work:

@media screen and (max-width: 769px){
.slideshow__title, .slideshow__subtitle {
display: block !important;;
}
.slideshow__text-wrap--mobile{
display: none !important;;
}

This is what shows up:

IMG-4831.PNG

 

 Thanks in advance for your help!

 

KetanKumar
Shopify Partner
14132 1646 5072

@mmmaggieli 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide 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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mmmaggieli
Excursionist
28 0 10

Hi @KetanKumar I have messaged you in your inbox. 

Thanks!

0 Likes
KetanKumar
Shopify Partner
14132 1646 5072

@mmmaggieli 

Thanks 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (max-width: 749px) {
.slideshow__title, .slideshow__subtitle {
    display: inline-block;
}
.slideshow__text-content--mobile {
display: none !important;
}
.index-section--flush:first-child {
padding-bottom: 0;
}
}

 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mmmaggieli
Excursionist
28 0 10

Thank you @KetanKumar 

However, do you know how to fix the following:

1) Add the shop now button (where I highlighted in yellow)

2) Bring the size of the image all the way down (red arrow)

3) Add the grey overlay so the text is easier to read (like the web version)?

See image below. Thanks

150169328_179101883623556_3645244585759240294_n.jpg

0 Likes
KetanKumar
Shopify Partner
14132 1646 5072

@mmmaggieli 

Yes, is possible to more customization code only mobile show 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mmmaggieli
Excursionist
28 0 10

@KetanKumar Can you kindly assist with the custom code? Thank you!

KetanKumar
Shopify Partner
14132 1646 5072

@mmmaggieli 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing