Custom CSS Error - Online Store editor session can't be published

[Toast2000toast]

Hello, I am trying to add custom CSS to the theme "Maker" to make the logo centred on all pages. I am changing the code on the theme setting tab.

Code: 

.header--container {

  justify-content: center;

  display: flex;

}

I am getting an error that says "Online Store editor session can't be published", please help.

Is this the wrong code? I am trying to just centre the logo image that is showing on the header.

[StoreSurgeon]

Hi @Toast2000toast 

To add your custom Css 

Paste your code in theme.css file in asset

.header--container {
  display: flex;
  justify-content: center;
}

. I hope this will help you if not please share your store URL and password if you enable

Thanks 

[GemPages]

Hi @Toast2000toast,

Glad to support you today.

Your code doesn't wrong but you should add the correct place. If your theme has a file theme.css or base.css, pls add that code under the file:

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

If you add that code to Theme.liquid file, pls add that code inside the <style></style> tag like this:

[joeybab3]

I'm also getting this issue trying to use the new custom CSS section editor:

 

The suggestions given above are obviously useless because we know that we can use CSS files to style the theme but the idea here is to use shopify's new section ad it doesn't seem to be working...

[joeybab3]

EDIT: Shopify support says that you can't use position: absolute in the custom CSS editor (like at all??) and you also need the selector you are trying to apply be apart of the hardcode, it can't be a custom liquid section or something like that... Seems like two kind of dumb limitations to me but maybe that will be fixed soon. 

In addition the editor is butchering some of my CSS and adding its own stuff in it like it thinks its part of the selector:

 

[BoxCarGuy25]

I'm also getting the same error and it only happens when I try to make the position absolute in the custom CSS section, which is exactly what I need ONLY for that specific page. If I change it in a asset file it changes the whole website. Any fixes so I can make it absolute?

[joeybab3]

Yeah shopify support said they currently don't allow position: absolute or any property value that requires a comma. 

I was told the second one was a bug and would probably be fixed but the first one may be here to stay... 

Definitely reach out to support so they know that a lot of us want to be able to actually use this section. 

For now I just put the CSS directly into a custom liquid section which is not ideal but it works.

[joeybab3]

Supposedly they have pushed a fix for position: absolute but no word yet on the slightly more complicated selectors.

[Maxcos]

Hi all,

was there an update to this? I am getting the same error and was directed to this post by the shopify support.

I was trying to style a button in the custom css tab.

The initial code I used worked: 

.button.button--primary {
background-color: black;
transition: background-color 0.3s ease-in-out;
}
.button.button--primary:hover {
background-color: gold !important;
}

Tried to then change it to a border rather than a full color when hovering:

background-color: black;
transition: all 0.3s ease-in-out;
}

.button.button--primary:hover {
background-color: black;
box-shadow: 0 0 10px gold;
transform: scale(1.05);
}

then got the "cant be published" error.

Tried this:

.button.button--primary {
background-color: black;
border: 2px solid transparent;
transition-property: background-color, border-color, transform, box-shadow;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}

.button.button--primary:hover {
background-color: black;
border-color: gold;
box-shadow: 0 0 10px gold;
transform: scale(1.05);
}

Same error.

The only other reason I found online was that apparently it was a size limit error of the json file.

If anyone has a fix for this that be great.

Also does anyone know if its theme related? Im using the Taste theme.

Many thanks!

[JeremyJones]

I'm also having issues but found a workaround to use all the css selectors which aren't yet supported.
Probably not a recommended solution but it works for me:

1. Find the page you are trying to modify in Customizer.

2. Add a Custom Liquid Block at the bottom of the page and set margins to 0 or very small.

3. In the Custom Liquid block use the <style> tag and enter your custom CSS in between </style>

No more issues.

A good workaround if you're just trying to edit one page (and you can always create a new template for that page if required). If you need the change across the whole site you could duplicate these steps on every page but it would get pretty repetitive.

Make sure to delete the problematic CSS from the Custom CSS box so you can save your changes.

[Cillian-Pender]

I was having this issue. I had some custom css code that I commented out in the editor panel.

Once I deleted that css code I was able to publish.

[mwex501]

Hello,

Several posted to this due to the errors relevant to creating custom CSS in the customizer. Shopify published all the limitations relevant to using custom CSS here: https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

I hope this helps!