Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • August 27, 2018 at 6:45 pm #1002409
    studioginkgo

    Hello,

    I would like to have 1/2 1/2, 1/3 2/3 or 2/3 1/3 columns and in it, pictures (not as background).
    These pictures should all have the same height.

    It’a easy to have equal size columns but the pictures in it have all same width, not same height.

    Any idea ?

    Thanks in advance,
    Nicolas

    August 28, 2018 at 11:35 am #1002632
    Nikko

    Hey Nicolas,

    If you already have those columns, please try to add col-work in the Custom Css Class field.
    Then go to Enfold > General Styling > Quick CSS and add this code:

    #top .col-work {
    margin-left: 1% !important;
    margin-top: 0;
    margin-bottom: 10px;
}

#top .col-work.av_one_half {
    width: 49.5%;
}

#top .col-work.av_one_third {
    width: 31.83333332%;
}

#top .col-work.av_two_third {
    width: 67.16666667%;
}

#top .col-work.first {
    margin-left: 0 !important;
}

#top .col-work .avia-image-container-inner {
    position: relative;
    overflow: hidden;
    height: 272px;
    width: 100%;
}

#top .col-work .avia-image-container-inner img.avia_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 272px;
}

    Hope it helps.

    Best regards,
    Nikko

    August 28, 2018 at 4:04 pm #1002741
    studioginkgo

    Thanks for your answer.

    I created a colour section and two columns 1/3 + 2/3
    – no spaces between columns
    – equal height
    – vertical align to middle
    – margin to 5 5 5 5

    I added your class and the CSS, it doesn’t work.

    You’ll find the link in private content.

    Thanks

    Nicolas

    August 30, 2018 at 9:34 am #1003459
    Dude

    Hi,

    I think the columns element is not the best solution in this case. I’d recommend to use the “Grid Row” element (Layout Elements) and to set up a grid with two columns. Then set a background image for each column and use the minimum height setting to set the image height. The size of the columns controls the image width.

    Best regards,
    Dude

    September 6, 2018 at 2:34 pm #1006616
    studioginkgo

    Hello,
    Thanks for your answer. I can’t use “Grid row” because I don’t want a fullwidth section.
    You’ll see an example in private content,
    Any idea ?
    Thanks in advance,
    Nicolas

    September 8, 2018 at 7:29 am #1007365
    Nikko

    Hi studioginkgo,

    Can you try adding col-work in Custom Css Classes field and not on the Developer ID?
    I tried adding that class name using a web inspector and it works.

    Best regards,
    Nikko

    September 8, 2018 at 12:00 pm #1007402
    studioginkgo

    Hi Nikko,
    Thanks for your reply. You’re right, I put col-work in the Developer ID field !
    It’s nearly working now.
    You’ll see a link to what I’ve done in private content.
    As you’ll see, the pictures are distorted. How can I correct this ?

    Thanks in advance,
    Nicolas

    September 11, 2018 at 5:41 am #1008174
    Ismael

    Hi,

    Try to apply the object-fit property to the image. This property is not supported on IE but it works on major browsers.

    #top .col-work .avia-image-container-inner img.avia_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 462px;
    -o-object-fit: cover;
    object-fit: cover;
}

    Best regards,
    Ismael

    October 25, 2018 at 3:20 pm #1026368
    studioginkgo

    Hello,

    I forgot to answer, it works, thanks !

    Regards,
    Nicolas

    October 25, 2018 at 5:01 pm #1026417
    studioginkgo

    Sorry one more question.
    I would like the pictures to be vertically centered. How can I do this ?
    Thanks in advance,
    Nicolas

    • This reply was modified 5 years, 10 months ago by studioginkgo.
    October 26, 2018 at 5:52 am #1026633
    Ismael

    Hi,

    You can adjust the top position of the img element.

    #top .col-work .avia-image-container-inner img.avia_image {
    top: -20px;
    -o-object-fit: cover;
    object-fit: cover;
}

    Best regards,
    Ismael

    October 26, 2018 at 9:37 am #1026673
    studioginkgo

    Hello Ismael,

    Thanks for your answer.

    If I do this, it will change the position of all img elements in the “patchwork”.
    I would like the images to be automatically vertically centered.
    Is it possible ?

    Thanks in advance,
    Nicolas

    October 26, 2018 at 3:05 pm #1026822
    Ismael

    Hi,

    Yes, it will affect every image with the col-work class attribute. Assign a new class attribute if you don’t want that modification to affect every image element in the site.

    Best regards,
    Ismael

    October 29, 2018 at 10:36 am #1027427
    studioginkgo

    Hi,

    As it’s not automatically vertically centered, it’s not a good solution for me.
    Thanks anyway and let’s close this topic.

    Have a nice day,
    Nicolas

    October 29, 2018 at 3:13 pm #1027588
    Ismael

    Hi,

    Alright. We’ll close the thread now.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Column with same height pictures inside’ is closed to new replies.