Submitted about 3 years ago

Single price grid component

cube-css, accessibility

Dave Quah•650

@Milleus

A solution to the Single price grid component challenge

Preview Code

Solution retrospective

Something I found useful about list-style from MDN website:

Safari will not recognize an unordered list as a list in the accessibility tree if it has a list-style value of none.

We can fix this by either adding an explicit role="list" to the <ul> element in the markup, or add a zero-width space as pseudo-content before each list item:

ul {
  list-style: none;
}

ul li::before {
  content: "\200B";
}

Code

Please log in to post a comment

Community feedback

mycrochip•460
@mycrochip
Posted about 3 years ago
Hello Dave,

Congratulations on completing this challenge. I love seeing results that are picture-perfect, such as the one you put forward.

Great job and thanks for the tip.

#I also copied your max-width for the desktop view in completing my own version of the challenge as well. The solution URL below will be active as soon as I make my submission:

https://github.com/mycrochip/single-price-grid-component.git

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord