Why is my CSS code not saving in the new editor?

Store Design
,
1

Hey Folks!

The following code puts the search icon together with an input line beautifully under the shop logo on Mobile. You can test this in mobile in your test theme using the css editor. However when saving you get the error “Session in editor cannot be published”. Does anybody know why this code works but cannot saved?

@media screen and (max-width: 990px){
.header__search{
   position: absolute;
   bottom: 5px;
   left: 0;
   width: 100%;
}
.header__search > details{
   width: 100%;
   padding: 0 12px;
   display: flex;
   justify-content: center;
}
.header__search > details > .header__icon{
      width: 100%;
}
.header{
   position: relative;
   padding-bottom: 58px !important;
}
.header .header__icons .icon-search {
   color: #707070;
}
.header .header__icons span{
 justify-content: center !important;
}
.header__search summary span::after {
   content: "Nach Produkte suchen";
   padding-left: 1.2rem;
   font-size: 1.2rem;
   color: rgb(147, 147, 147);
}
.shopify-section-header-hidden{
 top: calc(-1 * var(--header-height) - 58px);
}
}

image.png
image.png1287×956 162 KB

2

Hi Ben,

The following CSS selectors are not supported in custom CSS:

  • At-rules @import, @charset, and @namespace cannot be used
  • For section-level CSS, only at-rules @media, @container, @layer, and @supports are permitted
  • For section-level CSS, you can’t target the ID or classes of the wrapping Shopify Section element rendered by the theme with the shopify-section class

Read full details: https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

Your code may contains not-supported selectors. You can add custom CSS to base.css or create a custom.css file and embed to your theme.

3

It’s because Shopify’s new Custom CSS editor doesn’t support some of the CSS properties. You can talk to support to find out which ones aren’t supported from your code.

A workaround would be to add CSS to theme.css, base.css or create a custom one, depending on the theme you are using.

4

@BeautifulWeb @Van_Nguyen_GSG

Yes I’m trying to push the CSS editor to the limits and so tried adjusting the code accordingly but the search is now not rendered as good as in the above code and still not saving:

@media screen and (max-width: 990px) {
  .header {
    position: relative;
    padding-bottom: 58px !important;
  }

  .header__search {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
  }

  .header__search > details {
    width: 80%; /* Verändere diesen Wert, um die Breite der Suchleiste anzupassen */
    margin: 0 auto;
  }

  .header .header__icons .icon-search {
    color: #707070;
  }

  .header .header__icons span {
    justify-content: center !important;
  }

  .header__search summary span::after {
    content: "Nach Produkte suchen";
    padding-left: 1.2rem;
    font-size: 1.2rem;
    color: rgb(147, 147, 147);
  }
}

image.png
image.png450×252 6.65 KB

Will use the liquid files instead :disappointed_face:

5

Yup… Theme’s common CSS file or the custom one will be the best solution at this point!

6

Why is this the case? Why does the CSS editor only allow saving certain CSS rules?
I can input any CSS just fine and it is displayed correctly in the editor. It just refuses to save when it encounters CSS rules that it doesn’t know. I wonder what the purpose of this is? It does happily save invalid CSS property values for properties that it “knows”. Why then does it refuse CSS properties and directives simply on the basis that it doesn’t know them? This doesn’t make sense. Either your stupid CSS editor checks for validity or it doesn’t. This is half-arsed bleep and utter incompetence as one is already used from Shopify. Another “feature” for the trash can.