Single Price Grid Component using HTML, CSS, and Flexbox

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi

  This is hitting the top of the screen on mobile, so you'll want to fix that.

  The html on this needs a little work... Semantically these 3 boxes are all related to the first heading. This is all information designed to convince people to join, so it should not be three sections all with h1s (pages should only have one h1 anyway). Lose the 3 sections and make the second two h1s into h2s.

  Looking at css it's OK, but more complicated than it needs to be... If the parent is a flex display you can use flex properties on the children to control size. You may need a max-width but shouldn't need any widths or heights.

  I also think you need to be more consistent in how you're using padding and margin. Ideally on this, each box would have an equal padding on all sides. Then items within the boxes would have vertical margin, probably all in one direction, top or bottom. That one reusable class controlling the card padding can be used on all cards, you'd just need a modifier class to set the different colors.

  Use classes and not IDs for styling too.

  I hope this helps

  Marked as helpful

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Ps if you have chance, try refactoring this to use css grid. It's so well suited to it, more so than flex!

  0

  

  Marcus Hugo•365

  @marcus-hugoPosted over 3 years ago

  @grace-snow

  Thanks for all the great feedback! I definitely overcomplicated the css and I see about the h1s and the sections. I will start learning css grid and give it another try!

  0