How to keep text on images in mobile view with Editions theme slideshow?

Store Design
1

Hi - I’m using the editions theme and am using a slideshow section for my client testimonials. In the mobile version, the writing falls below the image, does anyone know a code that allows the writing to remain on the image like in the desktop version.

This is the preview of the site - passwords is xaiweg

https://www.rumibeautyco.com.au/?_ab=0&_fd=0&_sc=1

Thanks!

1 Like
2

@tahliamotteram

do you mean like this?

KetanKumar_0-1647484437349.png
KetanKumar_0-1647484437349.png1920×1080 306 KB

3

Yes exactly like that!

4

Hi @tahliamotteram ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
    #shopify-section-template--15545832243451__1645246032cfee0687 {
        .slideshow-slide__content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            padding: 0 20px;
        }
        .slideshow-slide__image-wrapper {
            padding-bottom: 75%;
        }
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.