Loop Grid how to get Equal height cell and contents

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 มี.ค. 2023
  • I have done a similar video previously for JetEngine Listing Grid. Today I got asked if the same thing can be achieved with Elementor Loop Grid.
    HTML and CSS are the same things, regardless of what they are created with, so the answer is normally YES.
    One extra consideration with Elementor is the extra wrappers it puts around containers and widgets. These need to be taken into account when creating CSS.
    Although the Loop Grid does have an "Equal Heights" switch, it does not take into account the template contents.
    This video shows how to target and align the last element to the bottom
  • แนวปฏิบัติและการใช้ชีวิต

ความคิดเห็น • 7

  • @isaelsantos6649
    @isaelsantos6649 2 หลายเดือนก่อน +2

    It worked for me. Thank you!

  • @CamelliaJaponica88
    @CamelliaJaponica88 ปีที่แล้ว +3

    I tried your solution but the whole container is pushed to the bottom leaving unequal blank spaces on the top of the loop items as each of them has a different amount of content inside. I tried setting the vertical arrangement of the container as Top but it doesn't help. Have you come crossed anything like that? Thanks for the video anyway!

  • @mukeshwarsingh7614
    @mukeshwarsingh7614 3 หลายเดือนก่อน +2

    Reminder: If you want to align other element of the Grid Loop, you have to change the code. For instance, I particularly have problems with Images, where some images are big and others are small, so I wanted to Align according to heading, so all headings are aligned irrespective of image size.
    So, I changed the code to -
    .elementor-element:nth-child(2) {
    margin-top: auto;
    }
    Explanation. I have three elements, Image, Title and Button. I wanted to align by Title, so I put the "nth-child" as 2. You can use this code and change the number to the element and Voila!

  • @gamipresscordial5379
    @gamipresscordial5379 4 หลายเดือนก่อน +1

    You didn't add the codes you used. Can you Please add the codes? Regards.

  • @mihaiciobanu01
    @mihaiciobanu01 ปีที่แล้ว

    Great video, i was looking for this. 👍Question: how can we set the image to be same size even when the dimensions are different, same happens in your video. Thanks!

    • @wpeasy
      @wpeasy  ปีที่แล้ว

      You use the CSS property aspect-ratio
      Unfortunately, Elementor puts html in multiple wrappers. So you could create something like the following, then just add the class to the image widget.
      .img-4-3 img{
      aspect-ratio: 4/3;
      object-fit: cover;
      }

  • @marceloangelim
    @marceloangelim 9 หลายเดือนก่อน

    It worked for me. Thank you!