Jump to content

Make blog image be responsive instead of just scale

Recommended Posts

Site URL: https://lizard-antelope-tm9b.squarespace.com/

I put a blog post via a summary block on my home page, and I just want the image, but it's responsive in a completely different way - it keeps its aspect ratio/proportion no matter what.

- I've turned off all the metadata. So nothing should be hiding below it.
Tried all the aspect ratio options, that doesn't help. Automatic is the worst.
The image is currently 4:3.

Love to know if there's another way to put a blog post on the home page and have it act the same way as other blocks, with no padding (if that's the issue)

Screen Shot 2022-09-15 at 6.04.58 PM.png

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

First, thank you so much for the help.
Derrick, see attached, it still has the white margin/padding at the bottom. The larger issue is the the way the blog/summary is responsive -- it won't crop the image as the block changes proportion, like all other SS image blocks.  So the transition to other screen proportions throws it all out of whack. Make sense?

2 hours ago, derricksrandomviews said:

Set the summary block design for grid, not wall and they should line up. 


Screen Shot 2022-09-16 at 10.09.43 AM.png

Screen Shot 2022-09-15 at 6.04.58 PM.png

Link to comment

Yes it does. I have a lot of summary blocks. I set the items for wall, not grid, so they don't line up at the bottom exactly, but I change the shape of the items with code.  It should work with 7.1 or 7.0 and if you wish to play around with it here it is, you can change the font, the padding and other things as well. As I said I have a lot of blocks added to a second blog page which acts as my front facing blog and the actual blog posts are in my main blog. which resides in the unlinked section of my 7.0 site. 

my random views

// DB Summary Block Design //

img.summary-thumbnail-image.loaded:hover {
 opacity: 0.5;

.summary-title-link {
    font-family: proxima-nova, serif;
    font-size: 18px;
.summary-excerpt p {
  font-size: 14px !important;
.sqs-block-summary-v2 .summary-item {
  background-color: #ffffff;
  border-radius: 70px 15px 70px 15px;
  -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 100.1) !important;
  -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 100.1) !important;
  box-shadow: 6px 5px 15px rgba(100, 100, 100, 100.1) !important;

// DB Summary Content Padding //

.sqs-block-summary-v2 .summary-item .summary-content {
    padding: 20px 40px 20px 40px;

// DB Summary Block Button //

.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
  display: inline-block;
  margin-top: 10px;
  background: linear-gradient(to right, #F07C63, #E45372);
  color: white;
  border: 0px solid white;
  border-radius: 50px;
  padding: 10px 20px;
 filter: drop-shadow(8px 8px 8px #666666);

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.