Reduce slideshow size desktop and mobile + remove arrow - Brooklyn Theme

Solved
katrina11
Tourist
8 0 1

Hi there,

I was wondering if someone knows how to reduce the slideshow on my landing page. It takes all the screen on mobile and a big part also on desktop. I tried to reduce image size but don't do nothing at all.

Also, I have little arrows at the Bottom of the slideshow and don't know how to remove them. I saw that I had to go in theme.scss and paste this at the bottom : 

button.hero__pause, .hero .slick-next {
    display: none !important;
}

So the pause sign and the right arrow came away but not the "previous" arrow. I tried to add ".hero . slick-previous" in the code but did not do something.

Thank you very much for your help.

Best,

 

Katrina

0 Likes
coder
Shopify Partner
4 0 1

Which site you are referring ?

Adnan | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire me.
- Feel free to contact me us me@adnanshahid.com
0 Likes
katrina11
Tourist
8 0 1

I am referring to this one : katkoil.com

 

Thank you

0 Likes
PeanutButter
Shopify Partner
368 68 152

This is an accepted solution.

To hide both arrows and pause button:

button.hero__pause,
.hero .slick-arrow {
  display: none !important;
}

 

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
coder
Shopify Partner
4 0 1

use .slick-prev for the previous icon. 

Adnan | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire me.
- Feel free to contact me us me@adnanshahid.com
PeanutButter
Shopify Partner
368 68 152

About the slideshow, currently your slideshow's height is set to be the same as the browser window height.

This is the code that is doing this:

.hero[data-adapt="false"] {
   height: 100vh;
}

What theme are you using? There might be a setting to change this behaviour

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
katrina11
Tourist
8 0 1

Alright, thank you very much for your answer. I am on theme Brooklyn. If I reduce it to 90 do you think It will reduce on the landing page ?

0 Likes
katrina11
Tourist
8 0 1

Thank you very much peanutbutter for your help It worked perfectly well

0 Likes
katrina11
Tourist
8 0 1

Thank you very much for your help coder!

0 Likes
PeanutButter
Shopify Partner
368 68 152

Let me check setting in Brooklyn and I will come back to 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
0 Likes