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

[WearAnime]

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.

[GabrielS]

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!

[WearAnime]

@GabrielS That looks great.

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

[GabrielS]

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,

[WearAnime]

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

[GabrielS · Accepted solution]

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!

[WearAnime]

That worked perfectly.

Thank you for your help, It looks great.

[GabrielS]

Glad to hear that!