Stacked Headings

This topic contains 3 replies, has 2 voices, and was last updated by  Sebastian 3 months ago.

Author Posts

andrewpeters

Hey there! I am trying to level up a bit on the CSS side. 🙂

Presently I’m trying to stack two headings in a Info Box Module in Beaver Builder.

I got it working on desktop, but considering how it looks on mobile I think I didn’t do it correctly? I was wondering if I could get help in understanding how to make this work correctly. Trying to learn! Just not sure where I missed it. The dev site is https://alliance.thereachco.dev. The heading I’m looking to tweak is just below the hero area, and there’s a few on the page.


Sebastian

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


andrewpeters

Ah! I get it. Worked like a charm. 🙂 Thanks for helping me out with that and more importantly, helping me understand it!


Sebastian

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

You must login or register to reply to this topic.