Lined Up Summary Block

Hi everyone,

I'm curious to know if somebody has any coding ideas to achieve a similar look as the attached? Ignoring the background colour, I guess I'm seeing if it's possible to make it so the thumbnail images align (I typically use differing image ratios and don't plan on changing this) in height, and then the metadata and heading aligns.

Thanks

Can you share link to page in screenshot?

48 minutes ago, tuanphan said:

Can you share link to page in screenshot?

https://thedesignfiles.net/2020/04/architecture-the-summit/ it's down the bottom the page

7 hours ago, Anthony_Richardson said:

https://thedesignfiles.net/2020/04/architecture-the-summit/ it's down the bottom the page

I guess you need to use some CSS to do this. Difficult to help without checking your summary block on your site

18 hours ago, tuanphan said:

I guess you need to use some CSS to do this. Difficult to help without checking your summary block on your site

Well my website is www.thedesignemotive.com but I'm hoping for something that won't require CSS for individual collection IDs, given it'll be on (eventually) hundreds of pages, so having hundreds of individualised  codes won't be practical.

5 hours ago, Anthony_Richardson said:

Well my website is www.thedesignemotive.com but I'm hoping for something that won't require CSS for individual collection IDs, given it'll be on (eventually) hundreds of pages, so having hundreds of individualised  codes won't be practical.

My idea is set max-height for images. But not sure it will look nice?

Add this to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.summary-item img {
    max-height: 150px;
    width: auto !important;
}
.summary-item .summary-thumbnail-outer-container {
    overflow: hidden;
}
}

On 4/23/2020 at 11:02 PM, tuanphan said:

My idea is set max-height for images. But not sure it will look nice?

Add this to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.summary-item img {
    max-height: 150px;
    width: auto !important;
}
.summary-item .summary-thumbnail-outer-container {
    overflow: hidden;
}
}

 

Didn't quite achieve the look, the text section hasn't resized to the image. I appreciate it though, I don't think it's something that can be easily achieved in Squarespace. I might just play around with it and see what happens. If I wanted to apply it to certain pages, how do I begin and end the code in the page header injection?

3 hours ago, Anthony_Richardson said:

Didn't quite achieve the look, the text section hasn't resized to the image. I appreciate it though, I don't think it's something that can be easily achieved in Squarespace. I might just play around with it and see what happens. If I wanted to apply it to certain pages, how do I begin and end the code in the page header injection?

 

<style>
  @media screen and (max-width:767px) {
.summary-item img {
    max-height: 150px;
    width: auto !important;
}
.summary-item .summary-thumbnail-outer-container {
    overflow: hidden;
}
}
</style>