v7 container bottom margins

bagginsMar 15, 2023

I'm having lots of problems with container's bottom margin. The first example is using my older canvas code and second example is using v7 code. I have attached images.
Older version - no extra margin in bottom
7 version - the section immediately after is blending in.

I would prefer to use the v7 code if at all possible

Older code:

<div class="section pb-0 mb-0" style="background-color: #82bced">
    <div class="container">
        <div class="fancy-title title-border mb-4 title-center" >
            <h3 class="text-white">
                <a href="https://www.instagram.com/balletauditions/" class="social-icon si-instagram" data-bs-toggle="tooltip" data-bs-placement="top" title="Instagram" target="_blank">
                                                    <i class="icon-instagram"></i>
                                                    <i class="icon-instagram"></i>
                </a>Instagram & 
                <a href="https://www.tiktok.com/@ballet_auditions?lang=en" class="social-icon si-tiktok" data-bs-toggle="tooltip" data-bs-placement="top" title="TikTok" target="_blank">
							<i class="icon-tiktok"></i>
							<i class="icon-tiktok"></i>
                </a>Tik Tok
                
Follow Us
            </h3>
        </div>
        <div id="top-charts" class="portfolio grid-container row dark gutter-20 desc-sm" data-layout="fitRows">
<?php
for ($i=1; $i <= $sorc190arycustctr; $i++) {
  $sv190igID            = $sorc190arycust[$i][1];
  $sv190igProgID        = $sorc190arycust[$i][2];
  $sv190igImageFile     = $sorc190arycust[$i][3];
?>
        <article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn">
                <div class="grid-inner">
                        <div class="portfolio-image">
                                <a href="aud.php?inpprogid=<?php echo $sv190igProgID; ?>">
                                        <img src="images/instagram/<?php echo $sv190igImageFile; ?>" alt="Image">
                                </a>
                                <div class="bg-overlay">
                                        <div class="bg-overlay-content dark" data-hover-animate="fadeIn">
                                                <a href="aud.php?inpprogid=<?php echo $sv190igProgID; ?>" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="icon-line-folder"></i></a>
                                                <a href="aud.php?inpprogid=<?php echo $sv190igProgID; ?>" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="icon-line-share"></i></a>
                                        </div>
                                        <div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
                                </div>
                        </div>
                </div>
        </article>
<?php } ?>                                             
        </div>
    </div>
</div>
<!-- END: INSTAGRAM FEED  -->

v7 code:

<div class="section footer-stick" style="background-color: #82bced">
    <div class="container">
        <div class="heading-block dark text-center border-0">
            <h3 class="ls-1">
                Follow Us
                <a href="https://www.instagram.com/balletauditions/" class="social-icon bg-light border-transparent h-bg-instagram" title="Instagram" target="_blank">
                    <i class="bi-instagram"></i>
                    <i class="bi-instagram"></i>
                </a>Instagram
            </h3>
                            
        </div>
        <div class="row dark g-4">
<?php 
for ($i=1; $i <= $sorc190arycustctr; $i++) {
  $sv190igID            = $sorc190arycust[$i][1];
  $sv190igProgID        = $sorc190arycust[$i][2];
  $sv190igImageFile     = $sorc190arycust[$i][3];
?>
            <article class="portfolio-item col-6 col-md-3 col-lg-2" data-animate="fadeIn">
                <div class="grid-inner">
                        <div class="portfolio-image">
                                <a href="aud.php?inpprogid=<?php echo $sv190igProgID; ?>">
                                        <img src="images/instagram/<?php echo $sv190igImageFile; ?>" alt="Image">
                                </a>
                                <div class="bg-overlay">
                                        <div class="bg-overlay-content dark" data-hover-animate="fadeIn">
                                                <a href="aud.php?inpprogid=<?php echo $sv190igProgID; ?>" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="icon-line-folder"></i></a>
                                                <a href="aud.php?inpprogid=<?php echo $sv190igProgID; ?>" class="overlay-trigger-icon bg-dark text-ts text-light h-text-color" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="icon-line-share"></i></a>
                                        </div>
                                        <div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
                                </div>
                        </div>
                </div>
        </article>
<?php } ?> 
</div>
</div>
</div>
<!-- END: INSTAGRAM FEED  -->

SemiColonWebSTAFFMar 15, 2023

Hello,

Canvas 7 the same Container Paddings. In the Demos, we have used the .footer-stick Class on some Templates for demonstrating our demos. You can simply remove this Class and the issue should be resolved.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.