Blog featured images on Squarespace 7.1 can be excessively tall depending on the uploaded image dimensions. Control the height using max-height and object-fit to maintain consistent proportions.
The featured image container is .BlogItem-header .blog-item-image or .header-image. Constraining it ensures a uniform look across all posts regardless of the source image dimensions.
.blog-item-top-wrapper .header-image {
max-height: 500px;
overflow: hidden;
}
.blog-item-top-wrapper .header-image img {
width: 100%;
height: 500px;
object-fit: cover;
object-position: center;
}
@media screen and (max-width: 767px) {
.blog-item-top-wrapper .header-image,
.blog-item-top-wrapper .header-image img {
max-height: 300px;
height: 300px;
}
}Enhance your blog with our Blog Sidebar toolTry it free →
