Code editor handling of slashes in CSS values

Loops & Logic
1

Hi, it seems the new code editor cannot handle the CSS value below, I assume it’s a problem with the slashes. :slight_smile:

grid-area: 1 / 1 / 2 / 2;

Chrome output:
image

The workaround is to use the longer syntax for grid-area:

  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: 2;
2

Great catch @Rips! thank you for letting us know, I’ve passed this along to our dev to take a look.

1 Like
3

I’ve realised it’s simply doing the maths:
1 / 1 / 2 / 2 = 0.25

This happens with the aspect-ratio property as well, but the calculated number still works in that case. :blush:

I think the editor needs to restrict maths to inside of the calc property for CCS.

4

Thanks again @Rips! I’ve provided your observation to our developer.

5

Hi @Rips sorry for not providing updates here but upon checking, the developers are still working working on this. If you want more information or just follow how things are doing here is the github link thank you!

1 Like
6

No problem, the work around for this issue is straight forward.