💖 Thanks for opening this pull request! 💖
Here is a list of things that will help get it across the finish line: - If this is a new or updated CSS interactive example, please ensure that you followed the CSS styleguide - If this is a new or updated JavaScript interactive example, please ensure that you followed the JavaScript styleguide - If your changes affects any of the steps in our contribution docs, please also make the relevant changes there.

This looks good, and I love space-counter, but I agree that the presentation of @counter-style is not ideal. One concrete issue is that it will overflow horizontally even at quite generous widths.

I would suggest instead of side-by-side, having the output and code top-and-bottom. You'll need to add flex-direction: column; to .output.section.

You'll also need to compress the content vertically. I would do things like:

• trim some vertical margins
• remove two of the list items (3 should be enough, just)
• reformat the text a bit: I think you could probably omit the <p><code>space-counter</code> is defined as:</p> bit, possibly remove system

I'd also have an <hr> to divide the output from the code. Something like:

What do you think? It's sad to have only 3 list items, I tried putting all the symbols on one line, but they'll be cut off at narrower widths.

Also, I think space-counter is the best-looking example, so I would make that the initial choice.

I like these suggestions, @wbamberg! I've resized the example like you suggested and space-counter has blasted off to the initial choice. Let me know if you want to see any other changes. Thanks!

This looks great. I noticed that the change introduced a mismatch between the symbols listed in the HTML and the actual symbols in the CSS.

I also realised that by reducing the font to 1.2rem we could fit 4 list items in, which I liked, and that the example would look better without the background-color on the list items (this is only there to help demonstrate list-style-position, which we are not doing here). So I made those changes.

I hope you don't mind me pushing them to your branch - it's just to stop you having to go round another review cycle, for things I really should have picked up the first time.

Congrats on merging your first pull request! 🎉🎉🎉

I've updated the page: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type :)

@ddbeck , looking at this example, I'd be tempted, now, to move the whole @counter-style bit out of the example and just have it in the MDN page underneath. The main disadvantage to this is that it means the @counter-style CSS itself and the documentation is it are further apart, so it's easier for them to inadvertantly diverge. But I think the example would have more space (no pun intended).

What do you think? I'm sorry to be indecisive about it, and I'd be happy to make the change, unless you wanted to.

@wbamberg Yeah, I understand where you're coming from. I don't think moving the @counter-style out of the example is a bad idea, though I'm a little reluctant to have part of the example outside of the repository.

Before settling on that, I wonder what you'd think of this idea. Instead of showing how @counter-style works at all, we could just assume that it does. Like this, maybe?

That would buy us a lot of… room and puts off the complexity to the page for @counter-style.

Instead of showing how @counter-style works at all, we could just assume that it does. Like this, maybe?

I like this!

OK, I'll open a new PR with the new look!