I have both vertical and horizontal pictures displaying on my web site:
The text is bouncing up and down depending if the picture is veridical or horizontal. I am using two column format, 1/4 and 3/4. Each row is a separate section. In easy slider, currently I am using “no scaling” as I don’t like the pictures to be cropped. I want my watermark to always be on the bottom right. None of the size options is a standard 3:2 ratio. I have created the photos out of Lightroom using crop “long side” to 1,024 pixels which works well for size of photo. I have gone into row layout and changed to “equal height” and this did not help.
Any ideas besides editing each of the photos either adding “white space” on the horizontal photos top and bottom or adding white space to the vertical photos on the side?
Hey martystl,
Thank you for the inquiry.
We could apply a minimum height to one of the columns but it is not recommended because the height value has to be adjusted on different screen sizes. Still, the best solution is use images with the same size and aspect ratio.
If you want to try the css, use this code.
.flex_column_table.av-equal-height-column-flextable.-flextable {
min-height: 318px;
}
You may have to replace the selector above with a custom css class or ID because the above css rule will affect all columns.
// https://kriesi.at/documentation/enfold/add-custom-css/
But then again, this is not recommended. Making sure to use images with the same size is a much better solution.
Best regards,
Ismael