How can I center product images in the Brooklyn theme on mobile?

Store Design
1

Hello, I have the Brooklyn theme and did some changes to my product template code. Now the image of the products appear on the left when in mobile. Could anyone help with how to center them ? the page is lesizmoor.com

thank you !!

Capture d’écran 2021-08-28 à 11.31.15.png
Capture d’écran 2021-08-28 à 11.31.15.png780×1274 94.5 KB

2

@InesBourgeois - can you please share this page link? did you add or remove any padidng?

3

It’s this page: https://lesizmoor.com/products/garment-02?variant=40562091655351

What I mainly wanted to do was make the images slide instead of having them one after the other vertically on the page. And I managed to do it but it appears not centered on mobile

4

@InesBourgeois - please add given css and check, adjust numbers as per need

.template-product .grid__item.large--seven-twelfths.medium--seven-twelfths.text-center {
    padding-left: 50px;
    padding-right: 50px;
}
5

Hi, didn’t work… would you have another idea by any chance?

6

@InesBourgeois - did you add it to the very end of theme.scss file?

7

Ahh Thank you! Sorry yes it worked on the product page! However on the homepage, I also included the product and it still is on the left… Any updates that could fix that as well?

8

@InesBourgeois - in that case please remove

.template-product

from above css, save and check

9

WORKED PERFECTLY!! THANK YOU SO MUCH