Centering an image in Collection page description

Store Design
1

I have added text-based images to some of my collection page descriptions to highlight positive customer reviews and I’d like it centered.

Example: Alpha Chi Omega Jewelry

I used the centering option on the collection page edit screen AND on the actual image detail edit screens (attached) and the image still displays a bit to the left. not left-justified and not left-centered.

Any ideas? thank you!

Lizzy

Screenshot 2023-10-12 at 9.39.19 AM.png
Screenshot 2023-10-12 at 9.39.19 AM.png657×575 59.6 KB

Screenshot 2023-10-12 at 9.39.30 AM.png
Screenshot 2023-10-12 at 9.39.30 AM.png654×449 32.8 KB

Screenshot 2023-10-12 at 9.41.34 AM.png
Screenshot 2023-10-12 at 9.41.34 AM.png653×563 72.1 KB

2

Hey Lkstar,

Your image is really left-justified (see image).

01.png
01.png602×469 46.5 KB

And this is caused by this CSS rule :

.Rte img {
    margin: 0 0 15px!important;
}

She force IMG (in element with class .Rte) to use margin left and right to zero instead of auto.

3

thank you! is there a fix for this that won’t break the template? (my workaround would be to recreate those images with a bunch of white space on the left.)

4

You can try by updating CSS rules like :

.Rte img {
    margin-top: 0important;
    margin-bottom: 15px!important;
}

Now, margin-left and margin-right get default values (eg: auto).

5

thank you - I will try! lk