Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Question

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

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 0
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.

Share this post


Link to post
  • 0
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;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
Posted (edited)
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

Edited by Anthony_Richardson

Share this post


Link to post
  • 0
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>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...