Having extra white between the body and footer

No description
5 Replies
jack_23011
jack_2301111mo ago
<footer class="info">
<!-- Container -->
<div class="container max-w-6xl py-5 mx-auto">
<!-- Footer Flex Container -->
<div
class=" footer-down-office flex flex-col items-center mb-8 space-y-6 md:flex-row md:space-y-0 md:justify-between md:items-start"
>

<!-- Social & Copy Container -->
<div
class="flex flex-col items-start justify-between space-y-4 text-black-500"
>
<!-- icons Container -->
<div
class="flex items-center justify-center mx-auto space-x-4 md:justify-end md:mx-0"
>
<footer class="info">
<!-- Container -->
<div class="container max-w-6xl py-5 mx-auto">
<!-- Footer Flex Container -->
<div
class=" footer-down-office flex flex-col items-center mb-8 space-y-6 md:flex-row md:space-y-0 md:justify-between md:items-start"
>

<!-- Social & Copy Container -->
<div
class="flex flex-col items-start justify-between space-y-4 text-black-500"
>
<!-- icons Container -->
<div
class="flex items-center justify-center mx-auto space-x-4 md:justify-end md:mx-0"
>
<!-- Icon 1 -->
<div class="h-8 group">
<p class = "footer-text text-white">Follow us</p>
</div>
<!-- Icon 1 -->
<div class="h-8 group">
<a href="https://twitter.com/KosmosSociety"/" target="_blank">
<img src="images/icons8-twitter.svg" alt="" class="h-6" />
</a>
</div>
<!-- Icon 2 -->
<div class="h-8 group">
<a href="https://linkedin.com/in/mohammed-sameer-kosmos-society"/" target="_blank">
<img src="images/icons8-linked-in.svg" alt="" class="h-6" />
</a>
</div>
<!-- Icon 3 -->
<div class="h-8 group">
<a href="https://www.youtube.com/@KosmosSociety"/" target="_blank">
<img src="images/icons8-youtube.svg" alt="" class="h-6" />
</a>
</div>
<!-- Icon 4 -->
<div class="h-8 group">
<a href="https://wa.me/918310458258"/" target="_blank">
<img src="images/icons8-whatsapp.svg" alt="" class="h-6" />
</a>
</div>
</div>
<!-- Icon 1 -->
<div class="h-8 group">
<p class = "footer-text text-white">Follow us</p>
</div>
<!-- Icon 1 -->
<div class="h-8 group">
<a href="https://twitter.com/KosmosSociety"/" target="_blank">
<img src="images/icons8-twitter.svg" alt="" class="h-6" />
</a>
</div>
<!-- Icon 2 -->
<div class="h-8 group">
<a href="https://linkedin.com/in/mohammed-sameer-kosmos-society"/" target="_blank">
<img src="images/icons8-linked-in.svg" alt="" class="h-6" />
</a>
</div>
<!-- Icon 3 -->
<div class="h-8 group">
<a href="https://www.youtube.com/@KosmosSociety"/" target="_blank">
<img src="images/icons8-youtube.svg" alt="" class="h-6" />
</a>
</div>
<!-- Icon 4 -->
<div class="h-8 group">
<a href="https://wa.me/918310458258"/" target="_blank">
<img src="images/icons8-whatsapp.svg" alt="" class="h-6" />
</a>
</div>
</div>
<!-- Copy -->
<div class="font-bold info-cl-one">
<p class="">Image source is from <a href="https://www.freepik.com/free-photo/3d-surreal-space-landscape_8879812.htm#query=3d-surreal-space-landscape_1048-12532%20jpg&position=23&from_view=search&track=ais" target="_blank">Kipargeter</a> </p>
</div>
<div class="font-bold info-cl-two">
&copy; 2023 Kosmos Society. All Rights Reserved
</div>
</div>
</div>
</div>
</footer>
<!-- Copy -->
<div class="font-bold info-cl-one">
<p class="">Image source is from <a href="https://www.freepik.com/free-photo/3d-surreal-space-landscape_8879812.htm#query=3d-surreal-space-landscape_1048-12532%20jpg&position=23&from_view=search&track=ais" target="_blank">Kipargeter</a> </p>
</div>
<div class="font-bold info-cl-two">
&copy; 2023 Kosmos Society. All Rights Reserved
</div>
</div>
</div>
</div>
</footer>
clevermissfox
clevermissfox11mo ago
Between the body and footer or bw footer and it’s sibling ? Can you please post your codepen so we can see what is going on in your code prior to the footer. Looks like you can open dev tools, have you tried debugging ?
jack_23011
jack_2301111mo ago
I tried debugging and can't find exactly what it means it's between body and footer
clevermissfox
clevermissfox11mo ago
you have some errors in your html. There are several tags like this <a href="https://linkedin.com/in/mohammed-sameer-kosmos-society"/" target="_blank"> that / slash and extra quotation " are throwing off elements beneath it. See how the color coding underneath is not working? Also, you havent removed the margin fom your body. Im also curious why you are using position: sticky on your footer. This property will allow the items to stick to the top of the viewport once you scroll enough so the start of the footer hits the top of the virewport. But your footer is the last item in the page. I think maybe you are wanting position: fixed?
Want results from more Discord servers?
Add your server