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

Shopify Discussion
1

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

Dawn5.0.0

Design and support by Shopify

Screenshot (2).png
Screenshot (2).png1920Ă—1080 502 KB

Screenshot (1).png
Screenshot (1).png1920Ă—1080 307 KB

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

Screenshot (4).png
Screenshot (4).png1920Ă—1080 393 KB

Thanks in advance,

Lauren

2

Hi and welcome!

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

3

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

4

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

@sparrowandfox Can you please send me store url?

6

By Jove you have done it!

A king amongst men… fan-bloody-tabulous!

Thanks so much for your help..

Lauren

7

You’re very welcome!

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