Levels ReadyTheme. How to narrow space between Hero Image and Promo Imagea

[Rodney]

HI I am using the Levels Readytheme and on the SF page there is space between the bottom of the Hero image and Promo Images. Can anyone direct me to where and what code I would need to change to narrow up that space? Thanks

[Matt Zimmermann]

That margin is set in your theme.css using the class .hero-slider

[Rodney]

HI Below is the code in the theme.css file for the hero-slider. Can you tell me what I need to change to narrow that space up between the hero image and the promo images.
.hero-slider {
margin-bottom: 3rem;
visibility: hidden;
}

.hero-slider.slick-initialized {
visibility: visible;
}

.hero-slider img {
width: 100vw;
}

.hero-slider .slick-dots {
background: rgba(0, 0, 0, 0.3);
border-radius: 1rem;
bottom: 2rem;
left: 50%;
line-height: 2;
margin: 0;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 7rem;
}

.hero-slider .slick-dots li {
margin: 0 0.25rem;
vertical-align: middle;
width: 1rem;
height: 1rem;
}

.hero-slider .slick-dots li button {
width: 1rem;
height: 1rem;
padding: 0;
}

.hero-slider .slick-dots li button::before {
line-height: 1;
width: 1rem;
height: 1rem;
content: '';
opacity: 1;
background: transparent;
border: 1px solid #fff;
border-radius: 1rem;
}

.slick-dots li.slick-active button:before {
background: #fff;
color: transparent;
opacity: 1;
}

[Matt Zimmermann]

Change the margin-bottom value here:

.hero-slider {
    margin-bottom: 3rem;
    visibility: hidden;
}

[Rodney]

HI
Yes this is what I did and no changes. Wondering if its always a issue of clear cache after I make a change?

.hero-slider {
margin-bottom: 1rem;
visibility: hidden;
}

[Matt Zimmermann]

Yes, clearing your cache should be a normal step when making CSS or JavaScript updates.

[Rodney]

Thank You!!