CODEWITHSUNDEEP
jqueryhtmlcss
user3816352
user3816352

Reputation: 187

Gap(white Space) is coming between Slider and Footer Div

I have a Slider div and a footer Div in my web page.The problem that i am facing with these two divs is that So much of WhiteSpace (Gap) is coming Which i dont Want.I am trying to place another Div in between the Two present right now but the problem of the gap is same.

Here is my HTML ..

 <div class="skdslider">
 // Slider HTML
 </div>

 <div id="footer" class="footer-shadow">
 //Footer HTML
 </div>

And here is the fiddle that i have created .Please see it..

Fiddle

Please help me to resolve this .Thanks

Upvotes: 0

Views: 258

Answers (3)

Jeremy
Jeremy

Reputation: 973

I solved it by changing that 50% to 47.5% and 49% respectively to get a reasonable gap below the slider. 

.skdslider:after {
    content: '';
    padding-top: 47.5%; 
    display: block;
}
@media screen and (max-width: 600px) {
    .skdslider:after {
        padding-top: 49%;
    }
}

Upvotes: 0

ebriggs
ebriggs

Reputation: 1216

I mentioned this in the comments - you have duplicate .skdslider containers, so it's getting wrapped twice, and the second container's :after is the problem.

Upvotes: 1

Sander Koedood
Sander Koedood

Reputation: 6347

I don't know what it's for, but by removing the following CSS:

.skdslider:after {
    content: '';
    padding-top: 50%; 
    display: block;
}

The gap is non-existant.

So, if that :after is not needed, I would remove it!

Upvotes: 1

Related Questions