Single price grid component using CSS Flex

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted 11 months ago

  Well done, this looks pretty good when I preview on mobile. But the CSS needs a lot of changes I'm afraid...

  Here are suggestions for you

  1. sign up would navigate somewhere so should be an anchor not button
  2. your css is near impossible to read. Follow standard formatting conventions - one property per line 3)Never ever write font size in px
  3. you should have no widths or heights in this, only a max width in rem on the component
  4. always use a modern css reset at the start of the styles
  5. you should be working mobile first with the styling. Mobile styles should be the default in this
  6. the component needs some space around it so it can't hit the sides of the screen. You can do that with padding on a wrapping element or margin on the component
  7. Do not nest css selectors like this when you don't need to. CSS becomes a nightmare to manage on larger projects if you don't keep the specificity low/flat. It's a very bad sign of you're needing to use !important
  8. the order of css really matters too. It should be mobile styles for a selector, then media query overriding the specific properties that need to change
  9. media queries must always be defined in rem or em not px. There's an article about this on the same site I shared above

  Marked as helpful

  1
• Account deleted

  This comment was deleted 11 months ago

  0

  ---

  

  T

  Grace•31,230

  @grace-snowPosted 11 months ago

  @davood-webdev no this is definitely a list, not a paragraph

  2