Why does my product image align right on desktop but center on mobile?

[Nickmegax]

My product description image is being aligned to the right automatically, even though I'm centering it in the middle or on the left.

In the mobile version it aligns in the middle without problems, but not on the computer

https://gigalar.com/products/bulldog-mordomo-decorativo

Isse is repeated on all products

[binal_identix]

Hello @Nickmegax!

You need to apply margin auto and remove left and right margin from the CSS file, please have a look at this:

After that it will appear like this:

Hope this helps.

[Nischay]

Hi,
Please use this tag same as it to fix the center alignment issue on the desktop.
<img data-mce-fragment="1" style="float: none; margin: 0 auto;" src="https://cdn.shopify.com/s/files/1/0685/4564/2794/files/Capturadetela2022-12-17164859_480x480.png?v=1..." data-mce-src="https://cdn.shopify.com/s/files/1/0685/4564/2794/files/Capturadetela2022-12-17164859_480x480.png?v=1...">

[INA_MSWEB]

Hi @Nickmegax!

I hope you are doing good and welcome to the Shopify Community!

This is MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore).

You should apply this css code - .product-block-list__item .card__section .detail-desc-decorate-richtext p img @media screen and (min-width: 641px) {margin: 0 auto !important;}

I hope this helped!

[GemPages]

Hello @Nickmegax 

It's GemPages support team and glad to support you today.

You can follow these steps:

1. Go to Online Store -> Theme -> Edit code
2. Open your base.css file and paste the following code below: 

@media screen and (min-width: 641px){
  .rte .detail-desc-decorate-richtext img{
     margin: 0 auto;
  }
}

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team 

[PageFly-Victor]

Hi @Nickmegax 

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code  and add this code on file theme.css

p:last-child, h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child{
display: flex;
justify-content: center;
}

Hope this answer helps.
Best regards,
Victor | PageFly