How can I adjust slideshow arrow positioning in mobile Debut theme?

Store Design
1

Hi,
I hope you’re all well.
I have a slideshow in my shop that also looks very good on desktop. Only in the mobile version the arrows are under the pictures of the slideshow and the whole looks a bit funny (screenshot in attachment).

Is there a way to have the arrows in the slideshow images on the mobile version ?
I use the Debut Theme.
Shop URL: https://alpha-art.eu/
Password: AlphaArt8123

I hope my question is understandable.
With best regards
Jojo

@KetanKumar

2

@Jojo1610
hii,
copy this code @media only screen and (max-width: 749px) and replace the code with this code.

@media only screen and (max-width: 749px)
.slideshow__text-wrap--mobile {
  display: block;
  position: relative;
  top: -2.1rem;
  background-color: transparent;
  width: 85%;
  margin: 0 0 -1.1rem 7.5%;
  z-index: 8;
}

Replace this css at the @media only screen and (max-width: 749px) Store->Theme->Edit code->Assets->theme.scss.liquid

Result :

oscprofessional_0-1654498667969.png
oscprofessional_0-1654498667969.png581×430 142 KB

3

@oscprofessional

Hi,
first of all, thank you very much for your answer!
Could you please describe in more detail where the code should be placed?
I think you mean in the theme.css file, but I’m not sure where.
I tried to place it at the very end, but that didn’t work.
Thanks in advance!

4

@Jojo1610

can you please show me new issue?

5

@KetanKumar

I placed the code from @oscprofessional at the end of theme.css, but nothing changed in the slideshow on the mobile version.

6

@Jojo1610

oh sorry for late here

can you please check your theme customization its allow to option choose adapt height