Closing the gap beween header and slider?

Here’s the base code you need to adjust:

#customizr-slider.carousel .item {
  height: 160px;
  line-height: 160px;
  min-height: 160px;
}

You need to adjust for differing viewports. See this Snippet for details on @media

Also look at this Snippet. You need to add under @media to suppress the white squares in smaller viewports

Rocco (@d4z) just sent me this which should help you, but you need to make your own adjustments:

@media (max-width: 1200px){
#customizr-slider.carousel .item {
height: 200px;
min-height: 200px;
line-height: 200px;
}
}
@media (max-width: 979px){
#customizr-slider.carousel .item {
height: 180px;
min-height: 180px;
line-height: 180px;
}
}
@media (max-width: 767px){
#customizr-slider.carousel .item {
height: 130px;
min-height: 130px;
line-height: 130px;
}
}

@media (max-width: 480px){
#customizr-slider.carousel .item {
height:         90px;
min-height:     90px;
line-height:    90px;
}
}

I have the code to fill the white boxes, but it isn’t working on mobile. It was working perfectly, but now it isnt.

.round-div {
border-color: #FF7F50; /* Change #000000 to background-color */
}

OK never mind the white boxes, got that fixed.
The code works, THANK YOU

So what exactly is that @media code doing? I think I understand the max width part having to do with the type of device viewing the site. But when setting the height, min-height, line-height, what am I setting? In the last one it says 90px, is that 90px from the bottom of the header or top of the page? I am sure I am not the only one wondering. Thanks

You reduce the div container of the image, since it’s automatically reduced.

So is the container the slider itself in this case? The codes above reduced the space between the slider and the header successfully. If the contanier IS the image how did this code reduce the space between the slider and header? I am a rank amateur at this, so I am trying to understand.
Thanks

It reduces slides height (the container of the image). The whole slider container has no fixed height, it depends on the slides height.
Reducing slides height you will see featured pages moving up right? Reducing line-height (or better, using a proper line-height), will move the image up (the image up in its container, which is the #customizr-slider.carousel .item), this will reduce the gap between the header and the slides.
I hope this is understandable, eheh, sorry, not my native language.

Anyway, clearly the gap is reduced, so problem solved? ??

Ok I think I understand. Will play with the numbers a little and see what it does. Thank you for the explanation. And thank you to rdellconsulting for the codes that work so well.

??