HTML CSS & Responsive design for Iphone SE, note 20 ultra, and desktop

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello and welcome to the community, congrats on your first challenge!

  There is a bit of a trick yo center this kind of components challenge, instead of using margins you can remove them and use flexbox directly on the parent element wich is the body, for this you need to set up the min-height: 100vh to your body, you could do something like this after removing the margins:

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

  It will remain a scroll bar but this can be remove with a style reseter or simple defining all the elements to margin 0 from the start like this: * { margin: 0 }.

  With this is should look good on your phone too!

  Hope my feedback helped you! Good job and keep going!

  Marked as helpful

  2

  ---

  

  P

  Aviel Hernandez•80

  @AvielDezPosted about 2 years ago

  @DavidMorgade Thank you for the fast response! This worked perfectly. I'll definitely investigate this code further for future use.

  1