Shopify themes, liquid, logos, and UX
Hi All-
I've just launched my blog at Bella Road (https://bellaroad.com/blogs/bella-road-backstage), and I'm having an issue with how Dawn Theme is handling the feature image. It seems to auto-crop the center of the image where I'd rather have the cropping anchor at the top of the photo (see the screenshot below). I've reviewed a bunch of threads, and the closest info I saw was someone referring to making the images adaptable to the original size, but that's not in my UI when that screenshot shows it should be (guessing it was a Dawn feature pre v14, which is what I have in prod).
Can anyone suggest a CSS tweak that would retain the physical size and shape of the Featured Image ... just anchor it from the top as opposed to the center?
I see my favorite Shopify genius @ThePrimeWeb has weighed into a few conversations, so maybe they have a thought?
Thanks!
Hi 👋
Try adding this css to your theme, it will work.
.card__media .media img {
position: top center;
}
Hi @BellaRoad did the above code worked for you?
Hi @Entesta. Thanks for pinging today as I got zero notification on your message from yesterday! Would I merely add the snippet to the end of base.css? Thanks!
Didn't seem to have the desired effect when appending to base.css or when adding as Custom CSS in the Blog Posts template. Might I be getting some image caching I need to manually work around? Thanks!
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025