Images in Summary Block

I'm trying to add two summary blocks to my homepage. These blocks will be next to each other and feature two posts each. One summary block will be pulled from a blog and another from our events page. When I created this, the images were not the same size (the blog images are shorter than the events images). How can I make all images the same size?

Can you share link to this page? I think we can use some code to make both same size

That would be great! Right now I'm working with this test page: https://www.aimphotonics.com/home-1-1-test

It will eventually go on our homepage: https://www.aimphotonics.com/

Try this code to Website > Website Tools (under Not Linked) > Custom CSS

div#block-b310c8d0a6fda8af9b05 {
.summary-thumbnail.img-wrapper {
    padding-bottom: 56.25% !important;
}

.summary-thumbnail.img-wrapper img {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}}

Thanks! That worked, but it gave it too much padding at the bottom so that the "More Events" button dropped way down. I would need a way to get rid of that white space that is under the event images.

On 2/14/2024 at 10:18 PM, kh123123 said:

Thanks! That worked, but it gave it too much padding at the bottom so that the "More Events" button dropped way down. I would need a way to get rid of that white space that is under the event images.

Edit Summary > Click Design Tab > Choose Grid instead of Wall

Unfortunately, this didn't seem to work; the blocks are back to having different-sized images. Maybe this isn't possible?

Use this new code

div#block-b310c8d0a6fda8af9b05 {
.summary-item {
    margin-bottom: 0px !important;
}
.summary-thumbnail-container {
    padding-bottom: 56.25% !important;
}
.summary-thumbnail-container img {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}}

On 2/17/2024 at 5:39 AM, tuanphan said:

Use this new code

div#block-b310c8d0a6fda8af9b05 {
.summary-item {
    margin-bottom: 0px !important;
}
.summary-thumbnail-container {
    padding-bottom: 56.25% !important;
}
.summary-thumbnail-container img {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}}

 

That now creates too much padding below news images so that the "More News" button dropped way down.

Can you add code to CSS box? I can check again easier

I just tested in browser and it looks fine