Brooklyn theme: reduce height of slideshow

Solved
adthai
Pathfinder
98 0 32

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'

Accepted Solutions (2)
dmwwebartisan
Shopify Partner
11514 2438 3529

This is an accepted solution.

@adthai 

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
11514 2438 3529

This is an accepted solution.

@adthai 

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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 13 (13)
dmwwebartisan
Shopify Partner
11514 2438 3529

@adthai 

Please share store URL & screenshot what do you want.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
adthai
Pathfinder
98 0 32

a-lineage-story.myshopify.com. Password is 'beckew' I want the slideshow to be shorter if possible please

adthai_0-1634532746660.png

 

dmwwebartisan
Shopify Partner
11514 2438 3529

This is an accepted solution.

@adthai 

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
adthai
Pathfinder
98 0 32

Thank you so much!!

adthai
Pathfinder
98 0 32

Hi, actually, on every photo besides the first slide, it goes blank showing no photo

dmwwebartisan
Shopify Partner
11514 2438 3529

@adthai 

Please add css code i will check and send correct code 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
adthai
Pathfinder
98 0 32

Done. Please take a look when you're available. Thank you

dmwwebartisan
Shopify Partner
11514 2438 3529

This is an accepted solution.

@adthai 

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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
adthai
Pathfinder
98 0 32

Looks great, thank you!!

dmwwebartisan
Shopify Partner
11514 2438 3529

@adthai 

Welcome again!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
adthai
Pathfinder
98 0 32

Sorry, I have one more question. Do you know any way to modify the height of the slideshow on mobile?

dmwwebartisan
Shopify Partner
11514 2438 3529

@adthai 

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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
sirajpk87
New Member
1 0 0

finally i got the right script that worked. Thanks very much.it really helped.