Blog Preview

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted 6 months ago

  Hey ! Great work out there i see that you are using margin in order to center the div or the card component and when i check the body css properties you are correct declaring the display : flex and its related attribute however using justify-self : center its not gonna work as expected what you need to add is justify-content : center and it will properly aligned on center also you can add specific height to center it you can use vh or dvh ( height : 100dvh). thats all thankyouuu. happy coding !

  .main {
    background-color: var(--White);
    width: 384px;
    border-radius: 20px;
    border: 1px solid black;
    box-shadow: 5px 5px;
    padding: 24px;
    margin: 80px;// you can remove this
    height: 100%;
  }
  

  body {
    background-color: var(--Yellow);
    font-size: 16px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    justify-self: center; // remove this
    align-items: center;
    min-height: 100dvh; // add this
    justify-content: center;// add this 
  }
  
  

  Marked as helpful

  1

  ---

  

  cie-cret•40

  @cie-cretPosted 6 months ago

  @AkoToSiJeromeEh Thank you so muchhh!! You've just saved my life 😭🙏 I was trying so many methods, but the min-height thing is a literally new thing for me. I'll keep that in mind. Thanks againn~

  0

  

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted 6 months ago

  @cie-cret welcome :)

  0