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’);
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.
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
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?
Hey!
Try editing the column element and in the Layout tab give it a negative top padding.
Cheers!
Elliott
This had no affect.
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
I don’t know how that code works, but it does. Thanks a lot!