Shop Buklder: section custom CSS add characters in the value field

Topic summary

A user is experiencing an issue when adding custom CSS to a media section in Shopify’s website builder (using the Impact theme). They’re attempting to modify the grid-template-columns property with the value minmax(160px, auto) auto auto.

The Problem:

  • After saving, a <strong> tag is automatically inserted into the CSS code, specifically within each minmax value
  • This tag causes an error and disables the CSS line
  • The issue appears in Chrome DevTools inspection

Current Status:

  • The CSS works correctly when the tag is manually removed via DevTools
  • The user suspects this is a Shopify-side error rather than theme-specific
  • They’re seeking help understanding why this tag is being added and how to prevent it

Note: The post contains reversed/mirrored text in some sections, suggesting a display or encoding issue. An image screenshot is referenced showing the problem in DevTools.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.

Working with the website builder, I try to add a custom css on a media section (my store is builed on the Impact theme but I think the error is on shopify side). I want to change the grid-template-columns proprety of a media section, here is my custom css code:

media-grid {
  grid-template-columns: minmax(160px, auto) auto auto;
}

Once saved, the change doesn’t work and a strange tag is added in the css code when I inspect the page with Chrome DevTool:

The tag #shopify-section-template–18056017772842__media-grid has been added in the minmax value. That create an error and disable the line.

Everything works fine if I manually remove the tag with the DevTool. Does someone knows why this tag is being added and how to fix this issue? Any hint is welcome.

Thank you.

UPDATE: The same tag is added in each minmax value I write in this custom CSS section.