Consistent Height for Overlay Sections between Pages in Sydney

From the Sydney demo, the section with the overlay above the image starting with the text
"DO YOU WANT TO…", I want to duplicate this in concept on multiple pages, with different text content and button content.

To that effect, I created a new section matching the layout and content of what was available from the demo content on the home page.

All works well except for one thing, on the new page, the vertical size of the overlay component is significantly taller than what is available on the home page. I would like this vertical height to be consistent between all pages so that the cool scrolling reveal of the underlying image is present. In my duplicated implementation, the vertical height is significant as the page has less content, and the reveal is not as dramatic, and the text and buttons on the page are not collapsed as with my home page and home page of the Sydney demo.

Am I possibly missing some setting that would cause the content to collapse vertically around the title text and buttons?

Do I need some special CSS to set the maximum height of this HTML element group, say max-height of .overlay element.

In a perfect world, all of these will have identical heights across the pages for consistency.

What am I missing?

Hello there,

Please share the link to the page where the issue appears on. Meanwhile, please review my reply on other topic here.

Regards,
Kharis

I found the problem, I did construct this section as described, but the top and bottom padding set at the row level for the text box and the section with the buttons must both be set to zero. The default was causing the section to have significant padding and therefore not collapse vertically around the content. This detail might be missing from your details on how to construct this type of content.

Hello there,

Thank you for the followup! From what you’ve written, you’ve been able to manage it successfully. Please let us know if you need anything else.

Regards,
Kharis