How can I adjust text and image alignment in my collection pages?

[sparrowandfox]

Hi There, 

Total coding newbie here..

I am trying to either centre the text, table and heading in my collection pages or stretch to fit the same area as the photo/products as seen in the below photos.. 

Dawn

5.0.0

Design and support by Shopify

And Secondly - if i want to show the collection image (which in certain collections i would love to do) it goes abnormally large as you can see below. is there a way to change it in shopify or is it a matter of getting the correct proportions before uploading

Thanks in advance,

Lauren

[WoodyDev]

Hi and welcome!

Could you provide the URL to these pages on your store and I will take a look for you 🙂

[sparrowandfox]

Hi Woody!

This is with the show collection image selected

https://www.sparrowandfox.com.au/collections/green-aventurine

And this is standard

https://www.sparrowandfox.com.au/collections/amazonite

Thanks!

Lauren

[WoodyDev · Accepted solution]

Awesome!

For the alignment, add this to the bottom of your component-collection-here.css file:

.collection-hero__title+.collection-hero__description {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

table {
    margin: 0 auto !important;
}

h1.collection-hero__title {
    text-align: center;
}

And to make the image fit, add this to the bottom of your base.css file:

.media>img {
    object-fit: fill !important;
}

[sparrowandfox]

By Jove you have done it!

A king amongst men... fan-bloody-tabulous!

Thanks so much for your help..

Lauren

[WoodyDev]

You're very welcome!

If you could spend a moment to read through my signature below, I would highly appreciate it ❤️

[DelightCart]

@sparrowandfox Can you please send me store url?