Jump to content

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

Recommended Posts

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.

image.thumb.png.e1b432dee34ce725cdfc063cd91901a4.png

 

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

image.thumb.png.4416dcdc8c395ac4cfc472f6260b6c70.png

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

Thanks so much!

Link to comment
  • Replies 15
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

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!

image.thumb.png.dfe4f4dcd2725e769baf5734dbeb718e.png

Link to comment

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

(Blue in screenshot if image)

image.thumb.png.96af9dd7179dfad17e2faad25c475e71.png

Add this CSS code to fix problem

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

 

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

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!

Screenshot 2023-12-27 at 09.29.03.png

Link to comment
  • 3 weeks later...
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

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

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;
}
}

 

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

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.