A user seeks to center-align a collection banner image with the title and description positioned underneath, all center-aligned. A solution is provided using CSS code added to the base.css file to center the layout and constrain the image width.
Key developments:
!important declarations ensures the styles override existing theme CSSResolution:
The original poster confirms the solution works perfectly. A third user later applies the same code successfully but initially encounters an issue with images being cropped to fit the container—they resolve this independently without sharing the specific fix.
Hi,
I would like to position the collection image in the centre of the collection banner.
I would then like to Position the Collection title and Collection description (Not shown in screenshot but I would like it as an option) underneath and also center aligned.
Please see screenshot for a visual of what I am describing.
My URL is www.wearanime.co.uk and the password is Ihaiya
Thank you in advance for any advice.
Hello,
Adding the below code at the end of your base.css file should address your issue.
.collection-hero__inner.page-width {
display: block !important;
text-align: center;
}
.collection-hero__image-container.media.gradient {
max-width: 800px !important;
margin: 0 auto !important;
}
Hope that helps!
Cheers!
@GabrielS That looks great.
Would it be possible to have the collection image above the title please?
Glad to hear that I could be of help!
Using the below would make the collection image to show above the title.
.collection-hero__inner {
flex-direction: column;
}
.collection-hero__image-container.media.gradient {
order: 1;
}
.collection-hero--with-image .collection-hero__text-wrapper {
flex-basis: 100%;
order: 2;
}
Regards,
@GabrielS I copied the code you supplied and it did not change the position of the collection image. I put it underneath the first bit of code you supplied. Is that corect?
It looked really good in the image you supplied but can I have the spacing more like it is in the image below? Thank you so much for your help.
I just did a test and seems to be working as expected. Consider adding !important at the end of each style, as below:
.collection-hero__inner {
flex-direction: column !important;
}
.collection-hero__image-container.media.gradient {
order: 1 !important;
}
.collection-hero--with-image .collection-hero__text-wrapper {
flex-basis: 100% !important;
order: 2 !important;
}
Cheers!
That worked perfectly.
Thank you for your help, It looks great.
Glad to hear that!
I used this code and it worked perfectly - thank you.
I have a question though:
Can I set the parameters to include the whole photo? Right now, because of the code and the “box size” it only shows part of the image that fits inside it. I have different images for different collections and it would be great to have them all look uniform and show the whole image.
Also, I tried making the banner across the whole screen but it was blurry and didn’t fit right just FYI.
Kind regards,
Omega Faucet
If you go to the home page and see the top image for “Kitchen Fixtures” then click on the “explore” button you’ll see the collection banner only shows a portion of the image. Here is the link: www.omegfaucets.com.
I figured it out 