Featured Images for Blog - Focal point sticks to bottom of image

Hi guys, wondering if anyone has any insight for me. Any time I add a feature image for a blog page the focus is always automatically on  the bottom of the image, which means the top of the image can get cut off.

I was going to change the images so the main part of the design is more towards the bottom, but if I do that then the feature image looks all wrong on the full lists of blogs on the blog page (see third image with blue background).

Any tips on how I can centre align the image? Moving the anchor point doesn't make any difference.

Thanks so much!

Hi,

Can you share link to blog page? We can check easier

It's not live yet, so its password protected. Do you have an email I can send to instead? Thanks!

You can share link + password 

https://diona-test-2023.squarespace.com/blogs

https://diona-test-2023.squarespace.com/blogs/accelerating-security-with-saas

You try adding to Website Tools (under Not Linked) > Custom CSS

.blog-basic-grid .image-wrapper img {
    transform: unset !important;
    object-position: 20% 50% !important;
}

Hmm that hasn't changed anything on the individual blog pages
https://diona-test-2023.squarespace.com/blogs/accelerating-security-with-saas

But it has altered how the summary images are displayed? They are all cropped on the right.
https://diona-test-2023.squarespace.com/blogs
 

The issue has never been with the main blog page and how those images are shown, the issue has been with the individual blog pages and the header image. I did a mockup of what I'm hoping for, where I show how it currently looks, and how I want it to look. Thanks a million!

It already centered, but because top of section behind the header, so you will see problem

(Blue in screenshot if image)

Add this CSS code to fix problem

body[class*="type-blog"].view-item header#header {
    position: relative !important;
}

That worked, thank you! The header image is probably too tall now, so will try out a different image size to see if that helps. Thanks again!

Hmm no uploading a new image with a shorter height isn't working, any tips on how to make the header image shorter in height please? I've included a blue line to show where I'd rather the image end, this way I can see some of the blog content underneath and not just the header. Thanks so mcuh!

Hey @tuanphan any help with making the blog header shorter in height please?

What is password?

22 hours ago, klb said:

Sorry its D!0naS!te

Thank you.

https://diona-test-2023.squarespace.com/blogs/accelerating-security-with-saas

the link doesn't work now

https://diona-test-2023.squarespace.com/blogs

I tried clicking on some items on this page but all redirects to 404 page

Weird, so sorry about that! Do you mind trying this?
https://diona-test-2023.squarespace.com/blogs-pages/accelerating-security-with-saas

D!0naS!te

You can add this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (min-width:768px) {
body[class*="type-blog"].view-item [data-section-fix="page-nx-fix"] {
    min-height: unset !important;
    height: 45vh;
}
}

That worked PERFECTLY!! Thank you so much!!