Hi everyone,
Hopefully this is the correct place to ask this - I'm really racking my brain trying to figure out what exactly is causing this issue.
On a site the slider is supposed to be 600px high, and tucked underneath the header (on the home page only). For whatever reason, the
If you look at the site here and see that it's causing the section below it to be pushed down an extra 100px.
Any help figuring out why it's doing this would be seriously appreciated!
Thanks, C
CSS:
.hero-banner{
height: 600px;
background-color: @black;
top: -100px;
padding: 0px;
position: relative;
overflow: hidden;
}
.uk-slidenav-position{
}
.uk-slideshow{
}
.uk-slideshow li{
height: 600px;
padding-top: 100px;
vertical-align: bottom;
overflow: hidden;
}
.slide-content-container{
vertical-align: bottom;
height: 500px;
width: 100%;
display: block;
}
.slider-image{
display: inline-block;
vertical-align: bottom;
}
.slider-cover{
display: inline-block;
width: 40%;
text-align: center;
vertical-align: bottom;
}I can also share the html/php if needed.
(PS I tried to share code via CloudUp as advised above but apparently you need a code in order to sign up and public registration isn't open.)
Could be that the images are not 600px in height?
Uikit is set up to take up the height of contents so anything that is different (larger in height) will cause the extra space below which is pretty annoying. Hopefully in uikit 3 that feature is removed.