Stacked Headings

Hey Andrew,

If I understand you correctly, you are trying to make the text overlap such that Life Change is in the background, and the mission heading is in front, both vertically and horizontally aligned with the background heading, which is taller and very faint.

You were on the right track with using position: absolute. But using bottom and top offsets for a large screen width won’t translate well to a smaller screen width, as you discovered.

What you are trying to achieve is fairly ambitious by the way, especially as CSS hasn’t been great for layout for many years (perhaps surprisingly). However, CSS grid changes that. It takes a bit of learning, and MT doesn’t have UI fields for grid yet (although they are coming in the next few months). But CSS grid is awesome once you get the hang of it.

To solve your issue in a way that works on mobile too, I recommend the following CSS styles, which you can copy and paste into the editor (to the left of the Font group) – overwriting the styles that are already there. And deleting or disabling the selector you created for the Life Change heading.

/** Content >> Sidebar links uabb infobox title wrap **/
.stacked-heading .uabb-infobox-title-wrap {
	display: grid;
	position: relative;
	grid-template-rows: auto;
	grid-template-columns: 1fr;
	align-items: center;
	text-align: center;
}

/** [New selector for mission heading] **/
.stacked-heading .uabb-infobox-title {
	grid-row: 1;
	width: 100%;
	position: absolute;
}

Why this works

1. The above code creates a grid container for the two headings, which centrally aligns items on both X and Y axis.
2. grid-template-rows is auto so that the larger Life Change heading determines the overall height of the container. grid-template-columns is 1fr meaning full width.
3. The mission heading is given absolute positing and a row start position of 1 so that it occupies the same grid area as the Life Change heading, which defaults to row 1/column 1 as it is the first item in the grid.
4. Width 100% is set because absolutely positioned elements do not automatically fill the width of their parent, even if they have display:block set
5. There is no need for z-index because the mission heading comes after the Life Change heading in the HTML source order. So it will display on top naturally.

I prototyped these styles on a separate site. I think they should still work on your site, but let me know if not.

Cheers!
Sebastian

You’re welcome Andrew. I’m glad it makes sense 🙂