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;
}
}
Thread Starter
David_G
(@questas_admin)
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 */
}
Thread Starter
David_G
(@questas_admin)
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.
Thread Starter
David_G
(@questas_admin)
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? 😀
Thread Starter
David_G
(@questas_admin)
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.
