How to Split Color 50/50 on a Full Width Section

[TSwebsite]

Hello!
How can I split a full-width section to display one background color on the left half, and another background color on the right half?
So in essence, how can I create a full-width area with a 50/50 color split?

I know I can add two columns and change each of their background colors, but they don’t run to the edge of the screen.

Thanks!
Valerie

[friech]

Hi Valerie,

Thank you for writing in, you can make a column a fullwidth (run to the edge of the screen) by turning off its ROW’s Global Container.

You can also do this via section’s upper and lower background layer option, but you need a custom CSS to make the upper layer background half-width. Add this to the section’s Element CSS area.

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

Please note that we do not provide support for custom CSS, it would be your responsibility to take it from here.

Cheers,

[TSwebsite]

@friech

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

Thank you so much, that worked perfectly!

Best wishes,
Valerie

[prakash_s]

Hello @TSwebsite,

Glad that @friech was able to help you. Please feel free to reach us if you have any queries regarding our theme and theme settings.

Thanks

[SJF_me]

@TSwebsite — You could also use a linear-gradient as the background-image. I’ve created this pen as an example for you. You could then apply it directly on the element with custom CSS using this example below:

$el{
  --leftColor: #FF8400;
  --rightColor: #292423;
  background-image: 
    linear-gradient(
      90deg,
      var(--leftColor) 0%,
      var(--leftColor) 50%,
      var(--rightColor) 50%,
      var(--rightColor) 50%
    );
}

Just swap out the hex values for --leftColor and --rightColor and you’ll be set!

[prakash_s]

Hello @SJF_me,

Thanks for sharing it. It might be helpful for the other customers who want to add gradient.

Thanks

[SJF_me]

@compania123 & @TSwebsite — it might not hurt to keep this post up since, as @prakash_s said…

@prakash_s

It might be helpful for the other customers who want to add gradient.

¯\_(ツ)_/¯

[prakash_s]

Hello @compania123,

By withdrawing the post, I believe you already have resolved the issue. If the issue still existed, you can let us know.

Thanks.