Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • October 28, 2019 at 3:55 pm #1151788
    Videmi

    Hi,

    I have the following style problem with the height of images.
    On my side I have a 1/3 1/3 1/3 layout with headline element, followed by a picture element underneath and then a text element underneath.
    If I have a short heading with 1 line height and in the next column on the right side a heading with 2 or 3 line height, I have different heights of the pictures. Is it possible to automatically give the images in each column the same height?

    Thank you very much!

    Sven

    October 29, 2019 at 10:02 am #1152002
    Ismael

    Hey Videmi,

    Thank you for the inquiry.

    Yes, this is possible. First, you have to add a custom css class name to the Image elements so that you can style them differently. If you haven’t enabled the custom css class field yet, go to the Enfold > Layout Builder panel and toggle the “Custom CSS classes input field” settings. You can then use the following css code in the Quick CSS field or the child theme’s style.css file.

    .custom-css-class .avia-image-overlay-wrap a.avia_image {
    min-height: 140px;
}

.custom-css-class .avia-image-overlay-wrap a.avia_image img {
    object-fit: cover;
}

    Make sure to replace the “custom-css-class” name with the actual class name of the Image elements. You will probably have to apply same steps for the special heading elements.

    Best regards,
    Ismael

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