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

Highlighted
Excursionist
31 0 2

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!

 

Screenshot_20191012-202455 (2).png

0 Likes
Trailblazer
486 117 161

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

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Excursionist
31 0 2
Tourist
17 0 1

Hello Evita,

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

 

Screen Shot 2019-10-15 at 12.36.26.png

0 Likes
Trailblazer
486 117 161

The password you sent me is incorrect.

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
17 0 1

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

0 Likes
Trailblazer
486 117 161

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

 

 

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Tourist
17 0 1

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

}

 

 

0 Likes
Excursionist
31 0 2

I sent you a new password. Sorry about that!

0 Likes