Tip Calculator | Custom Radio

Community feedback

• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 1 month ago

  Hi Mahmood, how are you doing? I really loved the outcome of your project, but I have a few suggestions that I think might be helpful:

  Using Flexbox or Grid on the body to center elements ensures a more responsive and adaptive layout, fitting different screen sizes seamlessly. It avoids manual calculations and constant adjustments needed with margin, padding, or absolute positioning. These techniques provide more consistent alignment and simplify the code.

  flexbox:

  body {
      display: flex;
      justify-content: center;
      align-items:  center;
      min-height: 100vh;
  }
  

  grid:

  body {
      display: grid;
      place-content: center;
      min-height: 100vh;
  }
  

  The rest is excellent.

  I hope you find it useful. 👍

  Marked as helpful

  0

  ---

  

  Mahmood•1,510

  @MahmoodHashemPosted about 1 month ago

  @AdrianoEscarabote Thanks for your feedback Adriano, but there is another way to center an element besides using Grid and Flexbox: using align-content: center on the body and margin: auto on the element you want to center. What are your thoughts on this approach compared to Grid and Flexbox?

  1

  

  Adriano•38,270

  @AdrianoEscarabotePosted about 1 month ago

  @MahmoodHashem I like to use magin: 0 auto; when the component I'm trying to center doesn't have a parent element, or it's an independent component, but most of the time this doesn't happen the best case is to use grid or flexbox

  1