I am updating my theme and need to stack the text and button on mobile on top of the slideshow image. How can I do this? Screenshots attached.
Topic summary
A user is updating their Shopify theme and needs help repositioning slideshow elements on mobile devices. Currently, the text and button appear overlaid on the slideshow image, but they want these elements stacked above the image instead.
Attempted Solution:
Another user provided CSS code to add to the assets/base.css file, targeting specific banner and media classes with properties like height: auto and order: 1.
Current Status:
The proposed CSS solution did not resolve the issue. The original poster is requesting alternative code or approaches to achieve the desired mobile layout. The discussion remains open with the problem unresolved.
Please add the following CSS code to your assets/base.css bottom of the file.
#shopify-section-template--18596832051519__slideshow .banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
height: auto;
order: 1 !important;
}
Thanks!
That did not work unfortunately, is there different code you can provide please?