Perfume Responsive Card

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Sociablerobot, welcome to the community and congrats on finishing the challenge!

  As Reddsito pointed out, you can center your card easily with flexbox, if you want to know there are other ways, for example using Grid also on the body like this:

    min-height: 100vh;
    display: grid;
    align-content: center;
    justify-items: center;
  }
  

  Regarding your project image, you should try to use background-repeat: no-repeat to avoid your image getting repeat on resizing!

  Hope my feedback helps you!

  Marked as helpful

  0

  ---

  

  sociablerobot10•30

  @sociablerobot10Posted about 2 years ago

  @DavidMorgade Thanks a lot for the welcome and for the help! I did background-repeat: no-repeat, but when I resize it, it doesn't take up the full width like before. Should I try height:100vh?

  0

  

  David•8,000

  @DavidMorgadePosted about 2 years ago

  @sociablerobot10 try going for background-size: cover (on the image) it should do the job

  0
• 

  Reddsito•210

  @ReddsitoPosted about 2 years ago

  Hello, I will not be the most experienced, but a tip to center a div in the middle of the screen is with flexbox, I would recommend that you see a tutorial on it, to summarize you place in the body = display: flex, justify-content: center, align-item: center, width: 100%, height: 100vh. and done :D

  Marked as helpful

  0

  ---

  

  sociablerobot10•30

  @sociablerobot10Posted about 2 years ago

  @Reddsito Thanks a lot for the help! It worked

  0