Fullwidth column background on 2 column row

[hivehouse]

I have a bit of a puzzle that I’m trying to solve.
It involves setting a full width column background (so that it extends to browsers edge) while still maintaining the overall site width seen in a row with the container ON.

I’ve come up with two possible solutions (I think) but wanted to see if there was something easier, simpler or more elegant.

In the secure note you will find a sample page.

I’ve included sections at the top and bottom to further illustrate the site width.

The first section with the blue gradient is the standard section/row/column build. A background image on the column with the row container ON.

The next section is my first solution. Setting a background image to the entire section but constraining the size to match how the row is broken up into columns. I have a media query on the section element to flip the size once it goes to a single column on SM/XS breakpoints.

The last solution involves removing the section background. Placing the background on the column instead and setting the row container to OFF. But to move the column to the center of the page to mimic a container row, I’ve turned on the flexbox option on the column and horizontal aligned the block left and right.

I think I like the section background better, but again, I was wondering if I’m missing a more basic approach to this.

Thank you for reading and hopefully proposing another alternative.

[nabeel]

Hi @wbgTHEMECO,

Thank you for reaching out to us. Your last solution is indeed a better solution and a recommended one which involves removing the section background and placing the background on the column instead and setting the row’s global container to off. One improvement I think of is setting the column’s left and right padding instead, to mimic the container row.

I think of no better solution than yours so you can stick with your last solution. Thanks!

[hivehouse]

Okay, thanks for the feedback.

I was using flex-box horizontal align right for that first column (with the blue background).

If I switch that back to horizontal align left, how would I calculate padding to mimic the container row?

thanks

[friech]

Hi @wbgTHEMECO,

Please set your left Column’s Flexbox horizontal align to end

• 

Then set the width (not max-width) of your text element somewhere 400px - 450px

• 

Hope it helps,
Cheers!

[hivehouse]

Thanks for the tips.

If I set explicitly the text element width, then it becomes a non-responsive element.
Any suggestion on how to account for that?
[UPDATED] - If I set the width of the text element to a Percent, it’s more responsive.

So I think my final question is how to control the flex box horizontal alignment such that when it goes to single column it uses start instead of end. I’m trying to avoid duplicating the column and using the hide at breakpoint option since it requires any edits to the text to be made in two places (which is prone to error by the end client user).

Any way to control the horizontal alignment without need to duplicate the column and using hide on breakpoint?

[friech]

Hi @wbgTHEMECO,

Sorry I forgot to account the mobile view on that text width, you can resolve that by changing back the width to auto on certain breakpoints by using the CSS media query.

Same thing for the column’s flexbox alignment, use a CSS media query to change the alignment on certain breakpoint.

e.g.

@media (max-width: 767px) {
	$el.x-col {
	    align-content: flex-start;
	}
}

Add this to the column’s Element CSS area.

Cheers!

[hivehouse]

Ah. That makes sense and is a cleaner solution than building media queries for a background on the section.

Sometimes I set the column to flex box row/column so I modified slightly the media query to account for either state. I used align-items, align-content and justify-content for flex-start in the media query.

Thanks for the tips and working through this. Having a two column full width background on a column was much more challenging than anticipated. But happy it’s working out.

[christian]

You’re welcome, @wbgTHEMECO. We’re glad to lead you to the right direction.