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

Solved
SneakerSafe
Excursionist
53 0 13

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?

Screenshot_20210121-143829_Chrome.jpgSneakerSafe_0-1611240149899.png

0 Likes
SneakerSafe
Excursionist
53 0 13

Can anyone help?

0 Likes
PeanutButter
Shopify Partner
330 66 137

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

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
SneakerSafe
Excursionist
53 0 13

Thank you very much

0 Likes
PeanutButter
Shopify Partner
330 66 137

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;  
  }
}
Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
SneakerSafe
Excursionist
53 0 13

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

141127143_227451972258609_5935168013873561597_n.jpg

0 Likes
PeanutButter
Shopify Partner
330 66 137

This is an 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;
  }
}

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
SneakerSafe
Excursionist
53 0 13

Thank you!! works perfectly now

SneakerSafe
Excursionist
53 0 13

@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

143422024_261643488806201_7965070064604377670_n.jpg

0 Likes
Soon
New Member
1 0 0

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! 

0 Likes