I encountered a problem.
You can also test it with your example on codepen.
When you put the size to 200px (--s: 200px;) and look at it from a mobile device or resize your browser to mobile dimensions, then the last hexagon misbehaves.
This also occurs with the original code/indentation.
I found a solution, but maybe you have a better one.
I just added a couple of extra hexagons and made them invisible.
visibility: hidden;
This way all the visible hexagons have the correct indentation, the last (visible) ones aswel.
The invisible hexagons will still be out of place, but it doesn't matter because nobody sees them.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi, very nice script.
I'd like to have the indentation beginning on the first row. Can you help me?
in the shape-outside use this
repeating-linear-gradient(#000 0 3px,
#0000 0 var(--f))
and in the
--fyou will find- 1px, replace it with+ 1pxThanks for your help :)
I encountered a problem.
You can also test it with your example on codepen.
When you put the size to 200px (--s: 200px;) and look at it from a mobile device or resize your browser to mobile dimensions, then the last hexagon misbehaves.
This also occurs with the original code/indentation.
Can you help me again?
I found a solution, but maybe you have a better one.
I just added a couple of extra hexagons and made them invisible.
visibility: hidden;
This way all the visible hexagons have the correct indentation, the last (visible) ones aswel.
The invisible hexagons will still be out of place, but it doesn't matter because nobody sees them.