1 row with 2 columns - mixed fixed and full width

Beaver Builder
1

Hi,

I would like to do the following thing.
I have a new row with 2 columns (50/50).

I would like to set a background image to this row or the first column that fits the whole screen, while the text in the second column is fixed inside my regular container.
The reference site is: http://www.renegade-empire.com/services/

Do you have any suggestions how to do that?

Thanks in advance
Bastian

2

Hey Bastian,

The only way I can think of to achieve that is to use multiple columns in a full width row and play around with the widths of the columns. Let’s say you use a 3 columns row, make the leftmost column, or rightmost, 50% wide then place an image using the Photo module. That should allow the image to reach the edge of the screen. On the other side, play around with the width of the columns so you get your fixed width content, you could go with 30% 20%, just play around until you get what you want.

Or you could just place a background image on a full width row and position it to the left or right, whichever you prefer.

Hope this helps!

Ben

3

[Content Hidden]

4

Hey Bastian,

That is via custom CSS and negative margin. You could set a negative bottom margin on that row with the iPad image. This moves the content below it upwards. You can then add a class to your photo module, e.g., overlapping, then add the CSS snippet below. You could play around with the z-index value.

.overlapping {
  z-index: 1;
  position: relative;
}

Hope this helps!

Ben