Shopify themes, liquid, logos, and UX
Hi, I am looking to reduce the height of my slideshow so that it doesn't cover the whole browser page. Is this possible? My URL is a-lineage-story.myshopify.com and my password is 'beckew'
Solved! Go to the solution
This is an accepted solution.
Please add the following code at the bottom of your assets/theme.scss.liquid file.
@media screen and (min-width: 769px) {
.hero[data-adapt=false], .hero[data-adapt=false] .slideshow__overlay:before {
height: 75vh !important;
}
.hero .slick-list, .hero .slick-track {
height: 100% !important;
width: 100% !important;
}
}
Thanks!
This is an accepted solution.
Remove previous all code and add new code
@media screen and (min-width: 769px) {
.hero[data-adapt=false], .hero[data-adapt=false] .slideshow__overlay:before {
height: 75vh !important;
}
.hero .slick-list, .hero .slick-track {
height: 100% !important;
}
}
Please share store URL & screenshot what do you want.
Thanks!
a-lineage-story.myshopify.com. Password is 'beckew' I want the slideshow to be shorter if possible please
This is an accepted solution.
Please add the following code at the bottom of your assets/theme.scss.liquid file.
@media screen and (min-width: 769px) {
.hero[data-adapt=false], .hero[data-adapt=false] .slideshow__overlay:before {
height: 75vh !important;
}
.hero .slick-list, .hero .slick-track {
height: 100% !important;
width: 100% !important;
}
}
Thanks!
Thank you so much!!
Hi, actually, on every photo besides the first slide, it goes blank showing no photo
Please add css code i will check and send correct code
Done. Please take a look when you're available. Thank you
This is an accepted solution.
Remove previous all code and add new code
@media screen and (min-width: 769px) {
.hero[data-adapt=false], .hero[data-adapt=false] .slideshow__overlay:before {
height: 75vh !important;
}
.hero .slick-list, .hero .slick-track {
height: 100% !important;
}
}
Looks great, thank you!!
Welcome again!
Sorry, I have one more question. Do you know any way to modify the height of the slideshow on mobile?
Please add the following code at the bottom of your assets/theme.scss.liquid file.
@media screen and (max-width: 768px) {
.hero[data-adapt=false], .hero[data-adapt=false] .slideshow__overlay:before {
height: 50vh !important;
}
.hero .slick-list, .hero .slick-track {
height: 50% !important;
}
}
finally i got the right script that worked. Thanks very much.it really helped.
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025