Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
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;
}
}
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
Can anyone help?
I answered to same issue but for Brooklyn theme a few days ago:
Let me check if the same solution works in debut and will come back to you in a few mins
Thank you very much
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;
}
}
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
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;
}
}
Thank you!! works perfectly now
@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
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!
@PeanutButter Thank you so much for sharing your knowledge. Highly appreciated!
@samkar your are welcome! I'm glad that my solution helped you!
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
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!
Hi!
Is there a way to get the buttons to sit at the bottom of the image rather than the centre?
@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.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024