HTML CSS flexbox

Community feedback

• 

  kugi•265

  @askugiiPosted over 3 years ago

  1.) 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.

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

  Font sizes
  Image sizes
  Paddings
  Margins
  Gaps
  Line heights
  

  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.

  2.) Also, as u can see in your Report page, there are accessibility issues due to lack of tag variation.If you use tags like (main, header, section, footer) screen readers will be able to understand the page too. Also the order of headers (h1, h2, h3, h4...) matter a lot too.

  Overall a great solution! Well done :).

  Marked as helpful

  1

  ---

  

  Ali Nail Bayraktar•55

  @KerevizxdPosted over 3 years ago

  @Bahadr-tech thanks for the feedback. very appreciated

  1