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

Technical Q&A

Topic summary

Issue: Unable to save custom CSS changes for a product grid; an error notice appears when attempting to save.

Context: Theme image settings are landscape by default, but one product collection uses portrait images. Goal is to show portrait images for that collection only, centered above the product name and not cropped.

Attempted CSS (key rules shown):

  • Initial version for img: display: block; max-width: 2 20px; max-height: 130px; width: 50%; height: 100%; display: flex; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto.
  • After reading position: absolute might not be allowed, user removed it and tried: width: 50%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; margin: auto. Same save error persists.

Notes:

  • The code snippets are central to understanding the issue.
  • “Product grid” refers to the layout of product cards; “collection” is a grouped subset of products.

Status: Unresolved. User requests help to understand why saving custom CSS fails and how to target portrait-only display for that specific collection without errors. No confirmed cause or workaround yet.

Summarized with AI on January 30. AI used: gpt-5.
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.