Single Price Component | Flexbox | HTML&SASS

Community feedback

• 

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  In addition to what Saif said - super important piece of advice; avoiding a fixed-height is crucial to a well coded component.

  Lets say you do something as simple as giving your component a fixed-height of lets say 500px. If you add content larger than this you will also have to recalculate the new 'height'.

  The better approach is to let the content dictate sizing.

  Adding: :root, * { box-sizing: border-box; } is a great start.

  This allows css to calculate your border and padding into the width/height of each element. I think this is the 'correct' and more intuitive behaviour.

  Edit: Just noticed you added this already, as I said, great start 😅!

  Then the 'height' of everything will be dictated by:

  1. Font sizes
  2. Image sizes
  3. Paddings
  4. Margins
  5. Gaps
  6. Line heights
  7. More that I can't think of right now 😅

  Thinking in this way yields benefits later on. Whether you want to add content, whether the component has to be extremely flexible because it will be used across different pages in slightly different ways, etc.

  Overall great solution, keep em' coming!

  Marked as helpful

  1

  ---

  

  kugi•265

  @askugiiPosted over 3 years ago

  @grizhlieCodes Thank you soo much for this detailed feed Rafal!Wow, i will approach my designs this way from now on.Again, thank you so much!

  0
• 

  Saif Narpali•590

  @SaifN97Posted over 3 years ago

  Hey good job on this one! I'll suggest avoid using fix heights unless you really need one and also look more into how you can use "em" units the combo of "rem" together instead of just rem units.. Hope this was helpful :) Have fun coding.

  Marked as helpful

  1

  ---

  

  kugi•265

  @askugiiPosted over 3 years ago

  @SaifN97 Thank you so much for feedback! I'll consider using more % in my future projects, as well as "em".

  0