Dividing A Full Height Row Into Two 50-50 Height Rows

Original Message:

Hi all, I’m using beaver theme. I’m using 2 horizontal colum in full height mode with this code .col-full-height .fl-col-content {
min-height: 50vh;

In first horizontal colum (black one) I need to insert an image and to put in the middle of the black section.

In second horizontal column (yellow one) I need to insert a module from UABB in the middle of the yellow section.

I know that is probably a css issue but I didn’t find the solution.

Any idea how to solve the issue ?

Thanks in advance for your feedback.

In this article I’m showing how you will divide a full height row into two 50-50 height rows and content will be centered align (horizontally and vertically). See the screenshot

Full width 50-50 height rows

Creating A Row in Full Height Mode

Follow the video at below and you will create a full screen row. I used heading module. You can try any module.

Custom CSS

Open the style.css file of your theme and add the following CSS

If you are using your own class name in Advanced tab, you will replace .half-full-height-rows with yours class name in CSS.

Leave a Comment

You must be logged in to post a comment.


Get free weekly PRO Beaver Builder Tutorials