I’m using the latest Dawn theme. I’d like to feature a hero banner on each collection page. I have added the Collection Image, but when it displays on the front end it is aligned right on desktop version (mobile looks good). How do I center the banner image?
Here is a screenshot of how it’s currently showing up. See the image top right? That’s the one I’d like to center.
Many thanks!
Hi @Dee23 ,
Please share your store URL and if your store is password protected then please provide password too.
So that we can help you.
Thank you.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Thank you! It’s www.ScruffandSmooth.com. Password is Beard.
It’s close, but I would like for the heading to be under the image, so they don’t overlap in the same space. Instead, I would love for the image to be centered a large, like a hero banner. Thanks again for your help!
can you try this code
.collection-hero__inner {flex-direction: column;}
.collection-hero__text-wrapper {flex-basis: 100%;}
.collection-hero__image-container{flex: 1 0 100%;}
Ok, will try it now!
Wow, that worked! It looks pretty good. The length of the banner is short. Is there a way for me to tweak the size? My images are cut short as is now.
But I can make it work if this is the only way. It’s much better than it was before!
My current images are larger. They are 2732x1536. But they are cropped when displayed on the page. Is there a different image size you recommend uploading to fit the banner size?
@KetanKumar Eek. It looks like solution above was good for desktop, but it’s not working for mobile. It basically disappeared into a thin line on mobile. Can you please help me adapt this for mobile too?
yes, please try this code
@media screen and (min-width: 750px) {
.collection-hero__image-container {min-height: 50rem;}
}
Should I add it or replace the former code with this?
you have just add this code no replace
Looks great on desktop! Still not showing up on mobile though.
oh sorry but your mobile image smaller no rush can you try this code
@media screen and (max-width: 749px) {
.collection-hero__image-container {
flex: auto;
}
}
Amazing! It looks great on both desktop and mobile. Thank you so much, @KetanKumar . You rock.
its my pleasure to help us