Solved

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

Timito
Pathfinder
93 1 37

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

Accepted Solutions (2)
PeanutButter
Shopify Partner
385 67 181

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

View solution in original post

PeanutButter
Shopify Partner
385 67 181

This is an accepted solution.

hi @Timito,

Add this at the end of your Assets/theme.css file:

.slideshow__arrows .slick-dots li button::before, 
.slideshow__arrows .slick-dots li a::before {
  width: 7px;
  height: 7px;
}

The original value is 9px. I set it to 7px which I think looks good, but you can change it to your liking 

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

View solution in original post

Replies 16 (16)

Timito
Pathfinder
93 1 37

Can anyone help?

PeanutButter
Shopify Partner
385 67 181

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
Timito
Pathfinder
93 1 37

Thank you very much

PeanutButter
Shopify Partner
385 67 181

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
Timito
Pathfinder
93 1 37

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

PeanutButter
Shopify Partner
385 67 181

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
Timito
Pathfinder
93 1 37

Thank you!! works perfectly now

Timito
Pathfinder
93 1 37

@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

Soon
Tourist
9 0 3

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! 

samkar
Tourist
5 0 2

@PeanutButter Thank you so much for sharing your knowledge. Highly appreciated!

PeanutButter
Shopify Partner
385 67 181

@samkar your are welcome! I'm glad that my solution helped you!

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
PeanutButter
Shopify Partner
385 67 181

This is an accepted solution.

hi @Timito,

Add this at the end of your Assets/theme.css file:

.slideshow__arrows .slick-dots li button::before, 
.slideshow__arrows .slick-dots li a::before {
  width: 7px;
  height: 7px;
}

The original value is 9px. I set it to 7px which I think looks good, but you can change it to your liking 

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
Timito
Pathfinder
93 1 37

Thank you very much @PeanutButter , is it also possible to reduce the size of the bar or to make more translucent? I'd also like the size of the text on the image and the button label size to be reduced please (as circled in my previous post)

Thank you!

Timito
Pathfinder
93 1 37
Belljones
New Member
6 0 0

Hi! 

 

Is there a way to get the buttons to sit at the bottom of the image rather than the centre?

hansfeng
Visitor
1 0 0

@PeanutButter  Hello! I had the exact same problem as the original author so I wanted to try your code. However, I don't have theme.css under Assets. Instead I have theme.scss.liquid under Assets. I pasted your code at the end of theme.scss.liquid but it did not help with my banner and button issue on the phone. Is this because my file is scss not css?

Here's the code I tried. 

 

/*
* 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;
}
}

Thank you.