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’.
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
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
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?
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?
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
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
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.
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
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
Just realised why - I hadn’t set the display to Flex, it looks like I’m sorted now, thanks a lot!!
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?
To answer my own question, for some reason I had to manually set the width of those divs to 100%
Looks like you’ve got it to work!