a white gap is created after adjusting the height on slider from 100% to 50% in the Main styles.css.I am using owl carousel for my slider…How do i remove this white Gap. The reason i adjusted the height is because the slider was taking too much space. Any help will be greatly appreciated.I can post the entire code. Thank you.
Hi djboziah, welcome to the forums!
Please do, or if you can, maybe provide a link to a working page that we can debug.
If you can only post code, please post relevant html and css together with at least the dimensions of the media the slides are using.
The site i am working with is www.playkenyamusic.com. The dimensions of the media i am using is 300px by 300 px. I reduced the slide height by 50% …it was originally set at 100% on the template which takes too much space on home page. here is the index code.
Play Kenyan Music<!-- Header -->
<header class="header">
<div class="container">
<div class="row">
<div class="col">
<div class="header_content d-flex flex-row align-items-center justify-content-center">
<!-- Logo -->
<div class="logo">
<a href="#" class="d-flex flex-row align-items-end justify-content-start">
<span class="logo_bars d-flex flex-row align-items-end justify-content-between"><span></span><span></span><span></span><span></span><span></span></span>
<span class="logo_text">Play Kenyan Music </span>
</a>
</div>
<!-- Main Navigation -->
<nav class="main_nav">
<ul class="d-flex flex-row align-items-center justify-content-start">
<li><a href="artists.html"> </a><a href="index.html">Home</a><a href="artists.html"> | Artists | </a><a href="Download.html">Download</a><a href="artists.html"> | Albums | </a><a href="blog.html">Shows</a><a href="artists.html"> | </a><a href="blog.html">Tours</a><a href="artists.html"> | </a><a href="blog.html">News</a><a href="artists.html"> | Shop | </a><a href="contact.html">Contact</a><a href="artists.html"> </a></li>
<li> </li>
<li> </li>
</ul>
</nav>
<!-- User area -->
<div class="log_reg d-flex flex-row align-items-center justify-content-start">
<ul class="d-flex flex-row align-items-start justify-content-start">
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
</ul>
<!-- Hamburger -->
<div class="hamburger d-flex flex-column align-items-end justify-content-between"><div></div><div></div><div></div></div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Menu -->
<div class="menu">
<div class="menu_container">
<div class="menu_background"></div>
<div class="menu_close"><i class="fa fa-times" aria-hidden="true"></i></div>
<div class="menu_content d-flex flex-column align-items-center justify-content-start">
<nav class="menu_nav">
<ul class="d-flex flex-column align-items-center justify-content-start">
<li><a href="index.html">Home</a></li>
<li><a href="artists.html">Artists</a></li>
<li><a href="contact.html">Download Music</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Home -->
<div class="home">
<!-- Home Slider -->
<div class="home_slider_container">
<div class="owl-carousel owl-theme home_slider">
<!-- Slide -->
<div class="slide">
<div class="background_image" style="background-image:url(images/suzzannaslide2.jpg)"></div>
<div class="home_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_content">
<div class="home_title_container text-center">
<div class="">
<h1><strong>Trending Now</strong><br>
<span style="color: #F0FF06"></span><span style="color: #EAF01A"></span><span style="font-size: 24px"></span></h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="slide">
<div class="background_image" style="background-image:url(images/jipeslider.jpg)"></div>
<div class="home_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_content">
<div class="home_title_container text-center">
<div class="">
<h1><strong></strong><br>
<span style="color: #F0FF06"></span><span style="color: #EAF01A"></span><span style="font-size: 24px"></span></h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="slide">
<div class="background_image" style="background-image:url(images/READYSLIDER.jpg)"></div>
<div class="home_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_content">
<div class="home_title_container text-center">
<div class="">
<h1><strong></strong><br>
<span style="color: #F0FF06"></span> <span style="color: #EAF01A"></span> <span style="font-size: 24px"></span> </h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Home Slider Navigation -->
<div class="home_slider_nav"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
</div>
</div>
<!-- Song -->
<div class="song">
<div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="images/song.jpg" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="song_content">
<!-- Player -->
<div class="single_player_container">
<div class="single_player d-flex flex-row align-items-center justify-content-start">
<div id="jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-gui jp-interface d-flex flex-lg-row flex-column align-items-start justify-content-start">
<!-- Player Controls -->
<div class="player_controls_box d-flex flex-row align-items-start justify-content-start">
<div class="order-lg-1 order-2">
<div class="player_title">song of the week</div>
<div class="jp-controls-holder player_controls ml-auto d-flex flex-row align-items-start justify-content-start">
<button class="jp-play player_button" tabindex="0"></button>
<button class="jp-stop player_button" tabindex="0"></button>
</div>
</div>
<div class="song_image ml-lg-auto order-lg-2 order-1"><img src="images/song_1.jpg" alt=""></div>
</div>
<!-- Progress Bar -->
<div class="player_bars d-flex flex-row align-items-start justify-content-start">
<div class="player_progress_box">
<div class="jp-current-time" role="timer" aria-label="time">00:00</div>
<div class="song_info">
<div class="jp-artist" aria-label="title">Sauti Sol - Suzanna - <a href="files/SautiSolSuzanna.mp3"> Download Audio</a></div>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div>
<div class="jp-play-bar"><span></span></div>
</div>
</div>
</div>
<div class="jp-duration ml-auto" role="timer" aria-label="duration">02:33</div>
</div>
<!-- Volume Controls -->
<div class="jp-volume-controls ml-lg-auto">
<div class="mute_button">
<button class="jp-mute" tabindex="0"></button>
</div>
<div class="d-flex flex-row align-items-center justify-content-start">
<div class="jp-volume-bar">
<div>
<div class="jp-volume-bar-value"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Song -->
<div class="song">
<div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="images/song.jpg" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="song_content">
<!-- Player -->
<div class="single_player_container">
<div class="single_player d-flex flex-row align-items-center justify-content-start">
<div id="jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-gui jp-interface d-flex flex-lg-row flex-column align-items-start justify-content-start">
<!-- Player Controls -->
<div class="player_controls_box d-flex flex-row align-items-start justify-content-start">
<div class="order-lg-1 order-2">
<div class="player_title">song of the week</div>
<div class="jp-controls-holder player_controls ml-auto d-flex flex-row align-items-start justify-content-start">
<button class="jp-play player_button" tabindex="0"></button>
<button class="jp-stop player_button" tabindex="0"></button>
</div>
</div>
<div class="song_image ml-lg-auto order-lg-2 order-1"><img src="images/jipe.jpg" alt=""></div>
</div>
<!-- Progress Bar -->
<div class="player_bars d-flex flex-row align-items-start justify-content-start">
<div class="player_progress_box">
<div class="jp-current-time" role="timer" aria-label="time">00:00</div>
<div class="song_info">
<div class="jp-artist" aria-label="title">Nadia Ft. Marioo - Jipe - <a href="files/Nadia-Mukami-Jipe-Ft-Marioo.mp3"> Download Audio</a></div>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div>
<div class="jp-play-bar"><span></span></div>
</div>
</div>
</div>
<div class="jp-duration ml-auto" role="timer" aria-label="duration">02:33</div>
</div>
<!-- Volume Controls -->
<div class="jp-volume-controls ml-lg-auto">
<div class="mute_button">
<button class="jp-mute" tabindex="0"></button>
</div>
<div class="d-flex flex-row align-items-center justify-content-start">
<div class="jp-volume-bar">
<div>
<div class="jp-volume-bar-value"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Featured -->
<div class="featured">
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-center"><h1>Featured Albums</h1></div>
<div class="featured_list">
<div id="jplayer_2" class="jp-jplayer"></div>
<div id="jp_container_2" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-playlist">
<div class="jp-playlist">
<ul class="d-flex flex-row align-items-start justify-content-start flex-wrap">
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- News -->
<div class="news">
<div class="container">
<div class="row">
<div class="col">
<div class="section_title"><h1>Latest News</h1></div>
</div>
</div>
<div class="row news_row">
<!-- News Post -->
<div class="col-xl-4 col-md-6">
<div class="news_post image_top">
<div class="news_post_image"><img src="images/keimage cool.JPG" alt="" width="225" height="225"></div>
<div class="news_post_content">
<div class="news_post_date"><a href="#">Oct 19, 2018</a></div>
<div class="news_post_title"><a href="#">Music Seminary at Festival</a></div>
<div class="news_post_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum, neque ac porttitor scelerisque, nisi nisl tincidunt enim, non aliquet diam neque sed urna.</p>
</div>
</div>
</div>
</div>
<!-- News Post -->
<div class="col-xl-4 col-md-6">
<div class="news_post image_bottom d-flex flex-column align-items-start justify-content-start">
<div class="news_post_content order-md-1 order-2">
<div class="news_post_date"><a href="#">Oct 19, 2018</a></div>
<div class="news_post_title"><a href="#">Festival list for 2019</a></div>
<div class="news_post_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum, neque ac porttitor scelerisque, nisi nisl tincidunt enim, non aliquet diam neque sed urna.</p>
</div>
</div>
<div class="news_post_image order-md-2 order-1"><a href="images/29436.jpg"></a></div>
</div>
</div>
<!-- News Post -->
<div class="col-xl-4 col-md-6">
<div class="news_post image_top">
<div class="news_post_image"><img src="images/playke.jpg" alt=""></div>
<div class="news_post_content">
<div class="news_post_date"><a href="#">Oct 19, 2018</a></div>
<div class="news_post_title"><a href="#">New album release in 2021</a></div>
<div class="news_post_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum, neque ac porttitor scelerisque, nisi nisl tincidunt enim, non aliquet diam neque sed urna.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Newsletter -->
<div class="newsletter">
<div class="container">
<div class="row">
<!-- Newsletter Content -->
<div class="col-xl-6">
<div class="newsletter_content">
<div class="section_title"><h1>Subscribe & Follow</h1></div>
<div class="newsletter_text">
<p>Enter your email to receive for all updates on Music,Albums shows,Tours,Festivals, Music Charity and Much more</p>
</div>
</div>
</div>
<!-- Newsletter Form -->
<div class="col-xl-6 nl_col">
<div class="newsletter_form_container d-flex flex-column align-items-start justify-content-end">
<form action="#" class="newsletter_form" id="newsletter_form">
<div class="d-flex flex-row align-items-start justify-content-between">
<input type="email" class="newsletter_input" placeholder="Your E-mail" required="required">
<button class="button newsletter_button"><span>subscribe</span></button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="background_image" style="background-image:url(images/footer.jpg)"></div>
<div class="footer_content">
<div class="container">
<div class="row">
<div class="col text-center">
<!-- Logo -->
<div class="logo">
<a href="#" class="d-flex flex-row align-items-end justify-content-start">
<span class="logo_bars d-flex flex-row align-items-end justify-content-between"><span></span><span></span><span></span><span></span><span></span></span>
<span class="logo_text">Play Kenyan Music</span>
</a>
</div>
<!-- Footer Social -->
<div class="footer_social">
<ul class="d-flex flex-row align-items-center justify-content-center">
<li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-behance" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer_bar">
<div class="container">
<div class="row">
<div class="col">
<div class="copyright text-center"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> All rights reserved | DJ BOZIAH </div>
</div>
</div>
</div>
</div>
</footer>
Here is the owl carousel css code.
/**
* Owl Carousel v2.3.4
* Copyright 2013-2018 David Deutsch
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
*/
/*
* Owl Carousel - Core
*/
.owl-carousel {
display: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
/* position relative and z-index fix webkit rendering fonts issue */
position: relative;
z-index: 1; }
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
touch-action: manipulation;
-moz-backface-visibility: hidden;
/* fix firefox animation glitch */ }
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0; }
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
/* fix for flashing background */
-webkit-transform: translate3d(0px, 0px, 0px); }
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); }
.owl-carousel .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; }
.owl-carousel .owl-item img {
display: block;
width: 100%; }
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
display: none; }
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
cursor: pointer;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.owl-carousel button.owl-dot {
background: none;
color: inherit;
border: none;
padding: 0 !important;
font: inherit; }
.owl-carousel.owl-loaded {
display: block; }
.owl-carousel.owl-loading {
opacity: 0;
display: block; }
.owl-carousel.owl-hidden {
opacity: 0; }
.owl-carousel.owl-refresh .owl-item {
visibility: hidden; }
.owl-carousel.owl-drag .owl-item {
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.owl-carousel.owl-grab {
cursor: move;
cursor: grab; }
.owl-carousel.owl-rtl {
direction: rtl; }
.owl-carousel.owl-rtl .owl-item {
float: right; }
/* No Js */
.no-js .owl-carousel {
display: block; }
/*
* Owl Carousel - Animate Plugin
*/
.owl-carousel .animated {
animation-duration: 1000ms;
animation-fill-mode: both; }
.owl-carousel .owl-animated-in {
z-index: 0; }
.owl-carousel .owl-animated-out {
z-index: 1; }
.owl-carousel .fadeOut {
animation-name: fadeOut; }
@keyframes fadeOut {
0% {
opacity: 1; }
100% {
opacity: 0; } }
/*
* Owl Carousel - Auto Height Plugin
*/
.owl-height {
transition: height 500ms ease-in-out; }
/*
* Owl Carousel - Lazy Load Plugin
*/
.owl-carousel .owl-item {
/**
This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
calculation of the height of the owl-item that breaks page layouts
*/ }
.owl-carousel .owl-item .owl-lazy {
opacity: 0;
transition: opacity 400ms ease; }
.owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
max-height: 0; }
.owl-carousel .owl-item img.owl-lazy {
transform-style: preserve-3d; }
/*
* Owl Carousel - Video Plugin
*/
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000; }
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url("owl.video.play.png") no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
transition: transform 100ms ease; }
.owl-carousel .owl-video-play-icon:hover {
-ms-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3); }
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
display: none; }
.owl-carousel .owl-video-tn {
opacity: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transition: opacity 400ms ease; }
.owl-carousel .owl-video-frame {
position: relative;
z-index: 1;
height: 100%;
width: 100%; }
Hello Erik I am new with site point.i am not sure if you responded…
Sorry my security won’t let me visit that site.
Website status:
Very risky
Whoa! Are you sure you want to go there?
http://www.playkenyamusic.com/ may be risky to visit.
It may be a false positive but these days I just don’t take the chance.Sorry 
If all was set up correctly then you would need to change the height on the main parent item to 50% but all the child elements should retain their 100% (otherwise they would be 50% of the parent).
However I’d need to see a demo to be sure. I don’t believe the owl carousel does 100% height by default and a lot of things would need to bein place to make this happen nicely.
1 Like
Off Topic:
You need to reach Trust Level 1 to post attachments.
Just read a couple more topics and you should be there. 
1 Like
I hae a quick look on someone else’s computer (didn’t want to risk mine) and as I guessed above you have set the slide to 50% height but your container is much bigger than that. Its the containers that need to be controlling the height.
Try making these changes.
.home{height:50vh}
.owl-carousel, .owl-carousel .owl-stage-outer, .owl-carousel .owl-stage, .owl-carousel .owl-item{
height:50vh;
}
.slide{height:100%}
Can’t guarantee it will work as you really need to work on a local live version as these slides are created dynamically and so can’r inject css via devtools to make a difference.
You may also run into issues with your parallax if it is based on the slider being 100%/
1 Like
Here is parallax info.
.prlx_parent
{
overflow: hidden;
}
.prlx
{
height: 130% !important;
}
.parallax-window
{
min-height: 400px;
background: transparent;
}
.parallax_background
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Thank you for your help Paul but that did not work.
When I look at your main styles css I still see these old rules.
.home
{
height: 863px;
border-bottom: solid 2px #ffffff;
}
.slide
{
height: 47%;
}
You can’t set the slide to 50% height or it will only take up half of the 863px that you allocated on the parent.
1 Like
How do change that on the parent?
here is some code my owl.carousel.js
this._core.$stage.parent()
.height(maxheight)
.addClass(this._core.settings.autoHeightClass);
With the code I gave you in the previous post that you didn’t use
that didnt work.
Folks this has been solved. To reduce the too much room taken by owl slider i reduced pixel from 863 to 370 or whatever in the main_styles.css height.
Yes it did as you used the same method in your very next post but used a fixed px height instead of the vh height. I pointed out a number of times where the problem would be.
3 Likes
I am new at coding paul…I thank you.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.