Why does adding custom CSS to my product grid result in an error?

Technical Q&A
1

Hi!

Im trying to add custom CSS to a product grid and keep getting an error notice that I cant save the changes.

(Reason: I have my pictures set to landscape in my Theme options, however for this particular collection all pictures are in portrait mode, so I wanted to use custom CSS to have them displayed in portrait only for this collection. They need to be centered over the product name and not weirdly cropped).

img {
  display: block;
  max-width: 220px;
  max-height: 130px;
  width: 50%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

This was the original Code I wanted to save, but I read in another post that position: absolute cant be used so i reduced it to

img {
width: 50%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

However im still getting the same error notice.

Help is very appreciated.