How can I change the text and button on slideshow on mobile so that it looks like the desktop one?

[SneakerSafe]

I have the debut theme, my website is sneakersafeuk.com. I have attached two images below, the 1st one is the mobile view, how can i make it look like the desktop version?

[SneakerSafe]

Can anyone help?

[PeanutButter]

I answered to same issue but for Brooklyn theme a few days ago:

https://community.shopify.com/c/Shopify-Design/Button-Label-on-desktop-view-is-different-from-mobile...

Let me check if the same solution works in debut and will come back to you in a few mins

[SneakerSafe]

Thank you very much

[PeanutButter]

Please try adding this code add the end of your Assets/theme.css file:

/*
 * Make slideshow caption same in mobile as in desktop
 * Customized by https://peanutbutter.es
 */
/* Hide button below slideshow */
.slideshow__text-wrap--mobile {
  display: none !important;
}

/* Prevent default hide of button over slideshow */
@media only screen and (max-width: 749px) {
  .slideshow__title, .slideshow__subtitle {
    display: block;  
  }
}

[SneakerSafe]

Thank you, this is what i see now. Not quite like the desktop version as the button labels are missing and the slideshow. Would really appreciate if you could show how to add those. Thank you

[PeanutButter · Accepted solution]

Please find the improved code below.  
Now the slideshow controls and the buttons should not be hidden in mobile
Also, I made that the semitransparent overlay between image and text also appears in mobile

/*
 * Make slideshow caption same in mobile as in desktop
 * Customized by https://peanutbutter.es
 */
/* Hide button below slideshow */
.slideshow__text-content--mobile {
  display: none !important;
}


@media only screen and (max-width: 749px) {
  /* Prevent default hide of text over slideshow */
  .slideshow__title, .slideshow__subtitle {
    display: block;  
  }
  /* Prevent default hide of button over slideshow */
  .slideshow__btn {
    display: inline-block;
  }
  /* Prevent default hide of overlay over slideshow */
  .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;
  }
}

[SneakerSafe]

Thank you!! works perfectly now

[SneakerSafe]

@PeanutButter I've got another query, how do you change the size for these 3 things? I'd like them to be smaller thank you!

website is sneakersafeuk.com

[Soon]

Hi friend,

Go to slideshow.liquid and search about:  {% if section.blocks.size > 1 %}

then you need just to add 00 after 1 (100% in stead 1%) and save

after that you will not see the rows anymore!