Slideshow mobile with text and button overlay, move text + button to bottom

Store Design
1

Hey, i got a slideshow on my frontpage and in the desktop view it looks fine. In the mobile version i changed with code the text & button overlay the image. But how can i move the text & button to the bottom of the picture?

This is the code i added in Asset->/theme

@media only screen and (max-width: 749px) {
.slideshow__title, .slideshow__subtitle {
    display: inline-block !important;

}
.slideshow__text-content--mobile {display: none !important;}
}

@media only screen and (max-width: 749px) {
.slideshow__btn {
    display: inline-block !important;
    font-size: 9px;
    line-height: normal;
    padding: 5px;
    min-height: 1.125rem;
 }
}

This is with example image+text visualising the problem:

Desktop view:

desktop_view.PNG
desktop_view.PNG1476×839 102 KB

Mobile view (get text & button down):

Mobile_view.jpg
Mobile_view.jpg448×340 15.9 KB

Would be glad to get some help, coz it is the last piece to finish the site :slightly_smiling_face:

2

Hello There,
Please share your store URL and and password.
So that I will check and let you know the exact solution here.

3

Hello,

wonderfulselection.myshopify.com

PW: chiegg

Thank you in advance!

4

@ZestardTech did you had a look and found a way to solve the issue? Looking forward to it :slightly_smiling_face:

5

Hello There,

Yes, I have checked this and found that the debugger is on and hence cannot check further.

Kindly check attached screenshot.

Thank You!

6

Oh, i see, i disabled the blocker, can you please try again. Thank you in advance!

7

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
@media screen and (max-width:768px){
div#SlideshowWrapper-1631877500df42580a ul.slideshow__text-content-list {
padding-top: 62px;
}
}
8

Thanks works perfect!

9

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.