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!
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;
}
}
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;
}
}
User | RANK |
---|---|
121 | |
96 | |
77 | |
69 | |
38 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022