Debut theme product pictures issues

[Nath_ida]

Hello, 

I have recently noticed many new small issues on my product images display on landing and collections page (not showing on products page!) : see below screenshot
1- i have these grey margins showing 

2- I added labels but it shows double : on both frames of the grey margin and of the pictures
3 - there is this difference of position of the 3rd columms (depending of the size on my window sometimes higher sometimes below 2 first columms)

Website https://lechapeaumagique.com/ 
Can you help me with that, i am a very beginner on coding thing 🙂 

Thank you 

[Mehran_Ali · Accepted solution]

Hi @Nath_ida 

The labels you are getting twice its because they are called twice in the liquid code well the original way to make the mentioned changes was using the liquid code but somehow you can manage these using CSS code as well 

Here is the CSS code you just need to put the code in
Theme -> code-editor -> base.css 

.grid-view-item__image-wrapper { max-width: 100% !important; }
.grid-view-item__image-wrapper>div {     padding: 0 !important; }
.grid-view-item__image-wrapper .grid-view-item__image { position: unset; max-width: 100% !important; max-height: 100% !important; }
.grid-view-item.product-card { margin: 0 !important; }
li.grid__item { margin-block: 20px; }

This is how it going to look after the CSS :

[Nath_ida]

It did work great!
Thank you very much @Mehran_Ali  !