Used flexbox styling to arrange the items and make it responsive

Community feedback

• 

  P

  Caitlin Donahue•120

  @DonahuecPosted 2 months ago

  • you'll want to put flex on an element instead of body. Trying to do layout work on body gets weird and doesn't always work. I'd recommend putting the display: flex on a main element. Also, setting it to column will make it easier to center objects both vertically and horizontally.
  • jumping to using all rem units for spacing seems nice but will likely cause layout issues for users who change their base font size, since the layout/spacing size will also grow and make it harder to to fit the content on the page. It is better to use units like px or percentages for layout, and keep rems to text related layout.
  • you can use the semantic html <main> element instead of a div with role=main

  Marked as helpful

  1

  ---

  

  Tarun Dadlani•60

  @tarun080698Posted 2 months ago

  @Donahuec

  1. This is a great suggestion and I agree with you that I added styles to the body instead of elements which is not a good practice.
  2. I'll look into this in more detail to understand what happens at the base level, thanks for the head-ups
  3. Sure, will change it. Thanks

  0