Setting a split background colour for columns made with Flexbox

[alexs1 (Alex Sherwood)]

I’ve just followed this tutorial to set up columns with responsive heights and it’s worked like a charm.

But I want to set the background of my webpage to be split vertically 50% blue and 50% white, to blend with the background of the two Flexbox items on desktop. The problem is that the margins for the Flexbox container are “locked to keep them responsive”. So I can’t just extend the width of the Flexbox items / container to the edge of the page.

How can I split the background in the way that I’ve described? I’m guessing I could use a background image to do this but that seems crude and not very ‘future proof’.

[dennyhartanto]

Hi @alexs1, please share your read-only link for others to have a look inside your site.

Anyway, you don’t have to “lock” the margins to keep it responsive. You can have the right-flex-div and left-flex-div fill 50% of the screen each with the colors. Then, add another div inside both of them to handle the content sizing inside.

Hope that makes sense.

Edit: How to share read only link

[alexs1 (Alex Sherwood)]

My bad, I assumed that was just for people who didn’t want to publish their site yet. Here’s the read-only link.

I’m probably missing something here but I’m seeing this “locked margins” message in Webflow -

When I try to set the width of the flex items, I get this -

I’m not sure how to get around that?

Edit

Sorry for the late edit.

I’ve just tried adding extra divs within the Flexbox, as you suggested but there’s still a margin at the edge of the page. Should I created a separate Flexbox to put inside each column?

[dennyhartanto]

No worries. You can actually add a max-width: 100% to the Container like so:

Then add another Div between your left-flex-div and it’s contents, same applies to right-flex-div.
.

I suggest adding a width: 80%; max-width: 800px to this new content-wrap so your content wont get too big on larger screens.

Then for the left-flex-div and right-flex-div I would suggest this options. So that the content is center on screen. Just play around with Align and Justify see what fits best for you.

[alexs1 (Alex Sherwood)]

Thanks! So I’ve done steps 1 & 2 and the background’s looking good

I do want to center my content too. But I don’t see those options for my left-flex-div and right-flex-div, this is what I see instead -

I do see those options for the Flex Container but when I change edit the Justify settings (only), nothing changes

Edit

Just realised why - I hadn’t set the display to Flex, it looks like I’m sorted now, thanks a lot!!

[alexs1 (Alex Sherwood)]

That’s basically working perfectly now.

Just a (hopefully) quick follow-up question. For some reason when I resize my window on desktop, it gets to what I assume is the Tablet breakpoint and then the background doesn’t extend to the edge of the screen.

I can see this in the editor view, the left-flex-div only covers a width of up to 840px and then won’t extend further. So it looks like something’s constraining it but I can’t see anything that would be.

Do you know why this is happening by any chance?

Edit

To answer my own question, for some reason I had to manually set the width of those divs to 100%

[dennyhartanto]

Looks like you’ve got it to work!