CSS Not Showing Changes in base.css but not saving in Custom CSS

Store Design
,

Topic summary

A user encountered an issue styling collection list cards where CSS worked in the theme’s Custom CSS section but failed to save, throwing an error. The problematic code applied a brightness filter to images and repositioned card content with white text overlay.

Root cause: The filter: brightness(0.6); rule prevented saving in Custom CSS.

Attempted solutions:

  • Adding code to base.css file → changes didn’t take effect
  • Increasing CSS specificity by prepending html to selectors → no changes observed

Working solution: The user successfully resolved the issue by inserting the original CSS code into the theme.liquid file, placing it just before the {% endstyle %} tag. This approach bypassed both the Custom CSS save error and the base.css application issue, allowing the desired visual effect (darkened images with centered white text) to display correctly.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi all, so I’m trying to make some changes to my collection lists with the code below:

.collection-list .card__media img {
  filter: brightness(0.6);
}

.collection-list .card__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
}

.collection-list .card__content .card__heading .full-unstyled-link {
  color: white !important;
  font-size: 24px !important;
  letter-spacing: 4.25px;
}

.collection-list .card__content .card__heading .icon-wrap {
  display: none;
}

.collection-list .collection-list__item {
  padding: 12px;
}

Which should make the collection cards look like this:

PassportEyewear_0-1740448690002.png
PassportEyewear_0-1740448690002.png1231×392 514 KB

This works when I do it in the custom css section of the Theme settings, however I receive an error when trying to save it.

I’ve tried adding the code to the base.css file instead, but then the changes don’t take effect.

Upon further testing it seems the issue code is:

.collection-list .card__media img {
  filter: brightness(0.6);
}

If I remove this it saves okay, but then the pictures are too bright to properly read the text.

Any ideas?

1 Like
2

Please edit your code to this then add it to very bottom of your base.css file

html .collection-list .card__media img {
  filter: brightness(0.6);
}
html .collection-list .card__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
}
html .collection-list .card__content .card__heading .full-unstyled-link {
  color: white !important;
  font-size: 24px !important;
  letter-spacing: 4.25px;
}
html .collection-list .card__content .card__heading .icon-wrap {
  display: none;
}
html .collection-list .collection-list__item {
  padding: 12px;
}
3

Thanks for your reply! Unfortunately, that didn’t result in any changes either.

I did, however, manage to find a fix myself by adding the original code to the theme.liquid file instead just before the {% endstyle %}