Tagged: 

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

    Hi,

    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!

    #1158982

    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,
    Nikko

    #1159237

    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?

    #1159714

    Hi,
    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,
    Mike

    #1160453

    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

    Thanks!

    #1160601

    Hi,
    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,
    Mike

    #1160684

    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.

    Thanks!

    #1160686

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

    #1160783

    Hi AbstraktMarketingGroupWebsites,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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

You must be logged in to reply to this topic.