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?