Community forum for knowledge and support

Updated 3 months ago

Ensuring Image Anchoring in Responsive Layouts

At a glance

The community member is using "header83" and "section_header9" on their website and is wondering how to ensure the images stay anchored to the 'top center' instead of 'true center' as the browser is resized, as the current setup is causing the people in the images to have their heads frequently cut off. Another community member suggests there is a position setting that allows choosing where to anchor the image when it has the "fit cover" property, and applying this to the image element itself.

Useful resources

Hello, Lumers! I'm using "header83" on my site, and I'm wondering if there is a way to ensure the images stay anchored to the 'top center' as opposed to 'true center' as the browser is resized. Same question for component"section_header9" which I am also using. I'm asking because all of the images we are using contain people, and their heads are frequently getting cut off. πŸ˜• Thanks in advance!

M
J
7 comments

Would you mind sending a read-only link?

- Can do. Links to the homepage and a sample band listing page are below.

thanks for that - super helpful! There's actually a position setting that allows you to choose where to anchor the image when its got the fit cover property. You would apply this to the image element itself.

Attachment
image.png

Well, that looks SUPER easy. Many thanks to you, !

Add a reply
Sign up and join the conversation on Slack