Order Summary Component using Flexbox

Community feedback

• 

  nadezhda-frunza•150

  @nadezhda-frunzaPosted about 1 year ago

  Congratulations on completing the challenge, well done!

  What is the reason of your issue?

  It was likely because you used fixed-size units (px) for the font size. When you use fixed-size units like px, the text does not respond to changes in viewport dimensions or user preferences. This can result in inconsistent font sizes on different screens.

  Why <div> fixed this?

  When you use a <div>, it's a generic container element without any inherent styling. You can apply CSS styles to a <div> exactly as you want, including setting a specific font size using any unit of your choice (such as rem, em, or %). Headings like <h2> come with default browser styles, so these styles can be different across different browsers.

  How to solve this?

  So if you want to still use semantic HTML (<h2>), you can switch to relative units like "rem" for font sizes. This will help you to achieve more consistent and responsive design. Also adding min-height: 100vh; to the body is a good practice.

  Hope it helps!

  1