@traez's Single price grid component using HTML and CSS

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 3 years ago

  Hello, Trae Zeeofor! 👋

  Regarding the CSS selector, I would argue that using a single class selector would be a better approach. I agree that id should be avoided but should be used instead. In this case, it might be possible to style all elements without id or classes. But, when you start working on a larger project, it will start getting harder to select the element that you want.

  Regarding your questions,

  • For responsiveness you have done a good job by using min-width media query and using em unit. But there are a couple of things that I'd to recommend.
    • Setting a max-width to the card and removing the width and the height properties. The only thing that the card needs to be responsive is a max-width to prevent it from filling the entire page. For the height, let elements inside it control it.
    • Setting only grid-template-columns. In this case, there's no need for rows since the element only spans through the column. Also, grid-template-columns: repeat(2, 1fr); is enough.
  • I would guess that "text-format" means the font styling like font size. I recommend simplifying it. There is a common font size like 1.2rem. You can set it as the body's font size. This way, you can just update the body element and then most of the elements will follow it.

  Hope this helps! 🙂

  00

  Marked as helpful