Text overlay is below slideshow images on mobile display. (DEBUT THEME)

[Konthy]

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]

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,
Evita

[Konthy]

www.petgrotto.com

[OTM]

The password you sent me is incorrect.

[Case]

case-o-rama-com.myshopify.com

I already made some adjustments, but:

1) the main heading text is not displayed (only subtitle)

2) the Shop Now button is too close to subtitle

Please help

[OTM]

Hey @Case,

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;
    }
}

[Case]

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]

I sent you a new password. Sorry about that!

[Case]

Hello Evita,

I got the same issue with text and button in mobile version: https://www.case-o-rama-com.myshopify.com.

[sunnytopshop]

@OTM  can you help me with my store? I'm having the same issue. sunnytop-shop.com password is sunnytop

[diego_ezfy]

@sunnytopshop, 

Please follow this tutorial, I believe it achieves exactly what you need.

Kind regards,
Diego

[AvadaCommerce]

Hi @sunnytopshop ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. 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.

[sunnytopshop]

woohoo!! Finally it worked-thank you!! except I had a button on one of the slides disappeared on the mobile view 

[sunnytopshop]

@AvadaCommerce 

[sunnytopshop]

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

[AvadaCommerce]

Hi @sunnytopshop ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. 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.

[sunnytopshop]

AMAZING, AMAZING, AMAZING - thank you so much!!!