Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 20, 2019 at 6:08 pm #1158558
    AbstraktMarketingGroupWebsites

    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!

    November 22, 2019 at 3:57 am #1158982
    Nikko

    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

    November 22, 2019 at 5:30 pm #1159237
    AbstraktMarketingGroupWebsites

    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?

    November 24, 2019 at 11:35 pm #1159714
    Mike

    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

    November 26, 2019 at 8:54 pm #1160453
    AbstraktMarketingGroupWebsites

    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!

    November 27, 2019 at 12:09 pm #1160601
    Mike

    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

    November 27, 2019 at 4:32 pm #1160684
    AbstraktMarketingGroupWebsites

    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!

    November 27, 2019 at 4:34 pm #1160686
    AbstraktMarketingGroupWebsites

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

    November 27, 2019 at 7:12 pm #1160783
    Victoria

    Hi AbstraktMarketingGroupWebsites,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.