Headline cantered between columns

[texaskiwi13]

Hi,

I’m creating a split screen landing page. One side black, one side red.

I would like a white headline that is centered over the two colors.

To achieve the colors, I have set up my row with two columns and assigned the appropriate colors to each column. I’ve then played with the headline margins so that it appears centered. The problem is that the headline is tucked behind the second column. I’ve tried adjusting the z-index, but it didn’t do anything.

My question is:

1. what is the best way to achieve this effect? What I’ve outlined above, or something else?
2. If the best method is what I have done, how can I get my headline to 1) be centered over the two columns and 2) not be partially hidden

Thanks!!

Ashley

[ruenel]

Hello Ashley,

Thanks for writing in!

You will have to create a section. And then insert a background color to the section both the lower and upper layer. Set the size of both layers to 50% and then you can have a two column background with one column row over it. To make this possible, you will have to use this custom css:

$el .x-bg .x-bg-layer-lower-color,
$el .x-bg .x-bg-layer-upper-color{
  max-width: 50%;
}

$el .x-bg .x-bg-layer-upper-color{
  left: auto;
  right: 0;
}

I have created an example for you. Please check the secure note.

[texaskiwi13]

That worked perfectly! Thank you so much Rue! And thank you for setting up the sample page. Made so much more sense seeing it in action.

[rad]

You’re most welcome and glad we could help