Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 22, 2015 at 8:08 am #522758
    JayKay7

    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’);

    October 22, 2015 at 8:51 am #522769
    JayKay7

    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.

    October 22, 2015 at 5:19 pm #523149
    Elliott

    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

    October 23, 2015 at 12:07 am #523386
    JayKay7

    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?

    October 23, 2015 at 4:01 pm #523933
    Elliott

    Hey!

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

    Cheers!
    Elliott

    October 23, 2015 at 4:10 pm #523947
    JayKay7

    This had no affect.

    October 23, 2015 at 5:48 pm #524024
    Elliott

    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

    October 24, 2015 at 12:28 pm #524215
    JayKay7

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

    October 26, 2015 at 8:04 am #524691
    Rikard

    Hi,

    Great, glad we could help :-)

    Best regards,
    Rikard

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