Center Align Collection Image inside of banner with title and description underneath

Technical Q&A
1

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.

collectionimagecenteralignment.png
collectionimagecenteralignment.png1920Ă—1080 248 KB

2

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;
}

GabrielS_0-1665181154418.png
GabrielS_0-1665181154418.png2532Ă—1254 174 KB

Hope that helps!

Cheers!

1 Like
3

@GabrielS That looks great.

Would it be possible to have the collection image above the title please?

1 Like
4

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;
}

GabrielS_0-1665182334361.png
GabrielS_0-1665182334361.png2530Ă—1247 217 KB

Regards,

5

@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.

collectionimagetitlewrongwayaround.png
collectionimagetitlewrongwayaround.png1920Ă—1080 186 KB

6

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!

2 Likes
7

That worked perfectly.

Thank you for your help, It looks great.

8

Glad to hear that!

9

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.

10

I figured it out :slightly_smiling_face: