Footer disappeared below my 2 cards grid section

Beginners
1

My “footer” disappeared below my “2 cards grid”
“2 cards grid section”:
<div class="col sponsor" style="display:grid;grid-template-columns:1fr 1fr;grid-template-rows:100px;grid-template-areas:'sponsor sponsor';">

“footer section”:
<section class="bg-primary py-5 text-white"> <div class="container py-3"> <div class="align-items-center row">
Help please

Also should I add box-sizing to universal css, possibly in html or body css?

2

Hi @kat,
It is really impossible to answer this without seeing the rest of the page. What do you mean by disappeared? What is the relationship between the two pieces of code? Is the cards section not supposed to have a closing div?
Cheers,
Bob

3

Everything was fine, then I started tweaking. Sponsor section is on top of grey
Footer section which only shows a bit of grey below the Sponsor section

       <!-- Sponsor -->
        <div class="col sponsor" style="display:grid;grid-template-columns:1fr 1fr;grid-template-rows:100px;grid-template-areas:'sponsor sponsor';">
            <div class="card mb-4 shadow-sm">
                <div class="card-header">
                    <h4 class="my-0 fw-normal">Sponsor a Wolf</h4>
                </div>
                <div class="card-body">
                    <h1 class="card-title pricing-card-title">$5 <small class="text-muted">/ mo</small></h1>
                    <ul class="list-unstyled mt-3 mb-4">
                        <li>Food</li>
                        <li>Medical care</li>
                        <li>Housing</li>
                    </ul>
                    <button type="button" class="w-100 btn btn-lg btn-primary">Fund Now</button>
                </div>
            </div>
            <div class="card mb-4 shadow-sm">
                <div class="card-header">
                    <h4 class="my-0 fw-normal">Sponsor the Pack</h4>
                </div>
                <div class="card-body">
                    <h1 class="card-title pricing-card-title">$15&nbsp;<small class="text-muted">/ mo</small></h1>
                    <ul class="list-unstyled mt-3 mb-4">
                        <li>Food</li>
                        <li>Medical care</li>
                        <li>Housing</li>
                    </ul>
                    <button type="button" class="w-100 btn btn-lg btn-primary">Start now</button>
                </div>
            </div>
        </div>
         <!-- End of Sponsor -->

        <!-- Footer  -->
        <section class="bg-primary py-5 text-white"> 
            <div class="container py-3"> 
                <div class="align-items-center row"> 
                    <div class="col-lg-7"> 
                        <h2 class="mb-3">Join Our Amazing Community</h2>
                        <p class="fw-light">                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> 
                    </div>                     
                    <div class="col-lg-auto ms-auto"> <a class="btn btn-outline-light ps-4 pe-4 rounded-pill" href="#">Register Now</a> 
                    </div>                     
                </div>                 
            </div>             
        </section>
        <!-- End of Footer -->
4

Hi @kat,
I’m not fully sure what you are trying to achieve with the grid. However, I think that is your problem. You are splitting the width of the viewport into two columns using grid-template-columns: 1fr 1fr; But then you use grid-template-rows:100px;. That means that anything after 100px in height is overflow. Your next section, the footer, will start where the sponsor div ends - at 100px. The rest of the card content overflows the 100px on top of the footer. Make sense? Instead of “100px” you should use “auto” for the rows.

As an aside, you are also naming your columns - not sure why since you don’t use that name again - maybe it is elsewhere in the code.
Hope this helps,
Bob

1 Like
5

Perfect!
I’m thinking it might be simpler to not use frameworks now that PG has html 5 templates. Thoughts?

6

Hi @kat,
Personally, I’m not a fan of frameworks. However, I can see how they make putting a lot of aspects of a page together a little more quickly. For better or worse, this might make pages look a little more “cookie cutter”. In my case, my eye for design is well and truly shite, so maybe I should use frameworks a bit more! :grin:
Cheers,
Bob

2 Likes