Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #1158558


    I want to make some columns to be individual heights but still centered vertically.
    Is there quick CSS that can achieve this?

    Example in private content. Thanks!


    Hey AbstraktMarketingGroupWebsites,

    Yes, but you’ll need to do the following first:
    1. Turn on Custom CSS Class Field: https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements
    2. Then in your page, put 2 1/2 column (only) inside a Color Section.
    3. Edit Color Section, then in Developer (tab) > Custom CSS Class, add a class name, for example myflex

    In Quick CSS, add this css code:

    .myflex .entry-content-wrapper {
        display: flex;
        align-items: center;

    Best regards,


    Thank you!!
    This worked perfectly!

    I do notice now that my drop shadow is showing up underneath the grey box instead of on top..
    Is there CSS to adjust the z index for that column?


    I’m not seeing any drop shadow under your gray boxes, only under your images, please try changing your css to:

    .amg-image-shadow .avia-image-container-inner {
        box-shadow: 10px 0px 40px -10px rgba(0,0,0,0.65) !important;

    Best regards,


    That’s not exactly what I meant.
    If you look at the drop shadow of the first image it goes under the grey box. If you look at the drop shadow on the second image it goes over the grey box. I want both of those shadows to go above the grey boxes to give the appearance that the image is coming forward on top of the grey boxes.
    The grey boxes should not have drop shadows.
    I believe the issue has to do with the columns z-index



    Thank you for the feedback, I believe I understand now, please try this css:

    #top.page-id-62 #av_section_4 .flex_column_div.first.avia-builder-el-15 {
    	z-index: 2 !important; 

    Best regards,


    Sorry.. This did the opposite of what I wanting.
    The second section with columns was already perfect, its the first section that is wrong.
    I need the image and the drop shadow in front of the column with the grey background so that it would visually appear that the grey square is coming from behind the image.



    Actually! I was able to alter the code you gave to work for the other section! Thanks!!


    Hi AbstraktMarketingGroupWebsites,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.