Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Perfume Responsive Card

@sociablerobot10

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi all. I completed my first challenge. Had some trouble moving the card to the center. What are areas for improvement and how can I make it optimal or incorporate best practices?

Community feedback

David 8,000

@DavidMorgade

Posted

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

Posted

@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

@DavidMorgade

Posted

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

0
Reddsito 210

@Reddsito

Posted

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

Posted

@Reddsito Thanks a lot for the help! It worked

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord