Jump to content

Lined Up Summary Block

Recommended Posts

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

Screen Shot 2020-04-22 at 12.14.44 pm.png

Link to comment
  • Replies 7
  • Views 824
  • Created
  • Last Reply
7 hours ago, Anthony_Richardson said:

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Screen Shot 2020-04-29 at 9.53.33 am.png

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.