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.