CSS Part 36: Footer

There’s mention of dealing with the Callout later on, but I don’t see any information after this video regarding how to position the callout box and then shrink the sides. I tried using absolute positioning and forcing relative position on the testimonial then nesting the callout within that section. While I am able to somewhat replicate the mockup, there are huge resizing issues and text that grows larger than the container. Any guidance as to how the callout box is placed between the testimonial and footer such that resizing the window doesn’t destroy everything is greatly appreciated!~

I made progress wrapping the callout in a div and setting it relative then using:

.container__callout {
position: relative;
width: 80%;
left: 50%;
transform: translateX(-50%);

}
.container__callout p {
font-size: 1.7rem;
}

.callout {
position: absolute;
display: inline-flex;
padding: 4rem;
width: 100%;
border-radius: 5px;
bottom: -220px;
}

I used breakpoints to adjust the padding for the footer and font sizes and it’s ALMOST good… but then I check galaxy5 view and the callout content is oddly NOT centered… despite being centered in every other view equal or greater than the width of a Pixel2… so 360pixels seems to break the centering of all the callout text and button.

cross check your html and css with the code below , it should work i guess

 <div class="container">
      <div class="callout callout--primary callout-signup">
        <div class="grid grid--1x2">
          <div class="callout__content">
            <h2 class="callout__heading">Ready to Get Started?</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi
              voluptate tempora qui distinctio consequatur aliquid pariatur
              cupiditate quas cum fugit.
            </p>
          </div>
          <a href="#" class="btn btn--secondary btn--stretched">Get Started</a>
        </div>
      </div>
    </div>

for css: add this rule to your css file:

/* Sign-up Callout */
.callout-signup {
  transform: translateY(5rem);
}