Ok, so I’m trying to make the collection image above the collection description. I’m 24 hours in, have tried tons of codes that I’ve seen posted. Help, please! With that said - I’d like the collection image to be the full size rendered image.
Topic summary
A Shopify store owner wants to reposition the collection image above the description and make it full width on their collection page.
Solution Provided:
A CSS fix was shared to add to the component-collection-hero.css file:
- Uses
flex-direction: column-reverseto swap the image and description positions - Includes media query adjustments for the collection image container (width: 100%, height: 100vh, full-width styling)
Outcome:
The CSS solution successfully resolved the issue. The original poster confirmed it worked perfectly after struggling with various code attempts for 24 hours.
Store URL: tr5ranchwear.com
Hey there. Please share your page URL and I should be able to help you.
Thanks
Hi Elizljeffery,
I am Sandeep.
Please use this CSS and Paste it into your “component-collection-hero.css” file at the bottom.
.collection-hero__inner.page-width {
flex-direction: column-reverse !important;
}
@media screen and (min-width: 750px){
.collection-hero__image-container {
width: 100% !important;
height:100vh !important;
flex: auto!important;
margin-left: 0 !important;
min-height: auto !important;
}
}
Thanks & Regards
Sandeep
1 Like
I’m so sorry, I thought I’d attached it. It’s
OMGosh! Thank you so, so, so much! I really appreciate this! This was winner-winner chicken dinner!
1 Like
Hi Elizljeffery,
winner-winner chicken dinner! 
Thanks.
If You need any help in future please let me know.
I am Here : sandeepkhandagade@gmail.com
For you. 
Thanks & Regards
Sandeep