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

Highlighted
Excursionist
45 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
Highlighted
Shopify Expert
667 170 218

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
Highlighted
Excursionist
45 0 2
Highlighted
Tourist
19 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
Highlighted
Shopify Expert
667 170 218

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
Highlighted
Tourist
19 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
Highlighted
Shopify Expert
667 170 218

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
Highlighted
Tourist
19 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
Highlighted
Excursionist
45 0 2

I sent you a new password. Sorry about that!

0 Likes