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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.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.
