How can I make my debut theme appear the same on mobile as on desktop?

Store Design
1

I need help with my debut theme I’ve edited the code so that the text appears on the slide in the mobile version like it does on the desktop version but the back drop that is on the desktop view doesn’t show on the mobile version photos will be below to show what I mean can someone advice me on how to make them the same please

Picture3.png
Picture3.png243×221 14.8 KB

Picture4.png
Picture4.png238×273 19.3 KB

Picture1.png
Picture1.png463×277 12.2 KB

2

@Remzmakaveli

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

the url is

https://luxe-patron.myshopify.com/

but i change domains so the new one is

https://mallacco.com/

4

@Remzmakaveli

thanks for url but your store is password protect

5

The password is don223

6

@Remzmakaveli

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

7

On my mobile using safari it doesn’t work as shown below

11982647-267E-4622-8749-11E35828DD67.png
11982647-267E-4622-8749-11E35828DD67.png828×1792 58.2 KB

8

@Remzmakaveli

can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.slideshow__overlay::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-image-overlay);
    opacity: var(--opacity-image-overlay);
    z-index: 2;
}
9

this worked thank you so much

10

@Remzmakaveli

its my pleasure to help us