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

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

.half-full-height-rows .fl-col {
    display: table;
    width: 100%!important;
    vertical-align: middle;
}

.half-full-height-rows .fl-col-content {
    display: table-cell;
    width: 100%;
    height: 50vh;
    vertical-align: middle;
}

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