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

    I’ve added an image to a 1/4 layout element that is within a colour section. My goal is for the image to be flush on the bottom of the color section, but I’ve searched high and low for an answer and can’t find one.

    I’ve pasted a link to the page in the private content so you can see what I’m trying to achieve.

    I also have the following code in my functions.php file in case that can be used to give the image a custom identifier.

    add_theme_support(‘avia_template_builder_custom_css’);

    #522769

    I have used a 430px height color section, and the image is 390px high. By selecting No Padding in the color section and then inserting an image that is higher than 430px I can get it to touch the bottom, however this doesn’t address the original issue of solving this problem by fixing the position. Although this does show that perhaps it is not a padding or margin issue as the image does touch the bottom when it is larger than the fixed heigh of the color section.

    Don’t know if this helps find a solution to this, but thought I would mention it.

    #523149

    Hey!

    Try dragging a codeblock element to your page content and add this inside.

    <style type = "text/css">
    #av_section_1 main {
        vertical-align: bottom !important;
    }
    </style>

    Regards,
    Elliott

    #523386

    This successfully put the image at the bottom, however now my other 1/2 column is no longer vertically centred, so it looks funny. Is there a way I can lower it without affecting the other elements?

    #523933

    Hey!

    Try editing the column element and in the Layout tab give it a negative top padding.

    Cheers!
    Elliott

    #523947

    This had no affect.

    #524024

    Hey!

    Try removing the previous code and add this in then.

    #av_section_1 .flex_column_table > .flex_column:nth-child(1) {
        transform: translateY(25px) !important;
    }

    Regards,
    Elliott

    #524215

    I don’t know how that code works, but it does. Thanks a lot!

    #524691

    Hi,

    Great, glad we could help :-)

    Best regards,
    Rikard

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