Jump to content

Align summary block items to bottom

Recommended Posts

Is it possible to align items with different aspect ratios in a summary block to the bottom instead of the top which seems to be the default?

I should add that ideally I'd like to know if images and text can have different vertical alignments i.e. if the information about the image can be vertically aligned to a top and the images aligned to a bottom so that it looks cleaner (at least to my perception)

Screenshot 2022-12-26 at 10.27.11.png

Screenshot 2022-12-26 at 12.09.43.png

Screenshot 2022-12-26 at 12.13.09.png

Edited by tomasgf
Addition for clarity
Link to comment
  • 2 weeks later...

Hi tuanphan,

Thanks for your answer.

Here's mine (Obra). Scroll down to "Works in the exhibition":


Ideally it would be nice with an alignment a bit cleaner like Stephen has it (not Squarespace though). Scroll down to "Selected Artworks" Images vertically aligned to the bottom, text aligned to the top:


This is another example that I believe works well, namely vertically centered images while text always aligned to it's neighbouring artwork:


All the best,


Edited by tomasgf
Link to comment
On 1/10/2023 at 1:53 PM, tomasgf said:


I tried it and it works perfect in that particular carousel but alters summary blocks in other pages that are displayed as "Wall"!  

Any thoughts?




Which way/code did you try?

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
  • 8 months later...
On 1/13/2023 at 1:55 PM, tuanphan said:

Which way/code did you try?

Sorry I had not seen your question until now! 

We're still struggling with the alignment issue and this is still very important to us.

I used the code that is readable in the screenshot you posted above:

display: flex
align-items: flex-end;

The desired alignment can be seen in the example below, were the text for each image keeps its integrity and is always aligned in relation to it's neighbour, regardless the variable aspect ratio of the images. 

The images themselves are in turn also aligned to their middle creating a much cleaner layout.

My site (with unwanted alignment):


Example wit desired alignment:


My best,



Link to comment
4 hours ago, tuanphan said:

Which exact code did you add?  We can tweak it to run on specific summary

I believe I actually found a way, by re-typing the code I was able to read on your screenshot above and targeting the specific block, which I understand is what you imply when you say "We can tweak it to run on specific summary".

That way other summary blocks that have the "wall" layout are not affected.

So, the grids with flex-end alignment look definitely cleaner, to my taste at least.

It's a bit time-consuming to have to target every block but in the end is worth it. The function should be of course native. Funny that it's not, isn't it? 

This is the exact code I used:


.summary-thumbnail-container  {     
  height: 406px !important; 
  display: flex;
  align-items: flex-end;
  align-content: flex-start; 

So, I believe it works kind of ok right now, thanks to you Tuan, still curious about that 406px height!

In any case: It would be interesting to also achieve centred aligned thumbnails while having the text content aligned to its neighbours.

This aesthetic comes from exhibiting fine art in real life, therefore the interest in reproducing that same feeling of order for the artworks on view.

Other examples where in which I targeted specific summaries with above mentioned code:



 All the best,





Link to comment

Create an account or sign in to comment

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

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