Some CSS won't save

Report Bugs
1

Hi team,

Having a really strange issue with some CSS that won’t save in the builder, please view this video to see and understand what I am talking about:

CSS won’t save issue screen recording

The CSS that I am trying to add that won’t save is this snippet:

.owl-slider-mask::before, .owl-slider-mask::after {
  position: absolute;
  z-index: 1;
  left: 100%;
  width: 100vw;
  height: 100%;
  background: var(--darkest-trans);
  display: block;
  content: ' ';
}

It was working before and will work when I save it the CSS into a CSS file, so I don’t think it’s an issue with my code.

The page I am working on is this one: https://tattoo-studio.divhunt.art/

I think it might be a bug, unless I am missing something else here.

2

You need to write each state separately even if they have same styles, its not possible to write it like in regular CSS file. And while writing directly CSS on tag or class inside custom code, you shouldnt go like “className::after” , you should be using word “self” always, as self is reffering to currently selected tag/class.

So in your case add your css like:

self::after {
  position: absolute;
  z-index: 1;
  left: 100%;
  width: 100vw;
  height: 100%;
  background: var(--darkest-trans);
  display: block;
  content: ' ';
}
self::before {
  position: absolute;
  z-index: 1;
  left: 100%;
  width: 100vw;
  height: 100%;
  background: var(--darkest-trans);
  display: block;
  content: ' ';
}
1 Like
3

Understood, thanks for that explanation. Everything works perfectly when written out like this.

Follow up question about CSS, is there any benefit to including the prefixes in the CSS like this:

transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-o-transform:translateX(-50%);

Or does Divhunt handle browser compatibility automatically?