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

Responsive Product Card Component Made with HTML and CSS

weronika 50

@WerSzpe

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


Hello, just finished this project and I noticed/have a question about two things. First I have some issues with centering content and its width and height thus my question: are there some best practices considering placement of page/element within body of a page (for example the page width should cover full width of a body, there should be no space between top browser bar and page content itself etc)? Second: is there a way to change src of an image from CSS file media query or it is better to use picture tag with sources? Or perhaps there is a way to interact with source from media query General feedback also welcome!

Community feedback

FerZva 250

@FerZva

Posted

For center elements you can use two methods

  1. Use flex: display: flex, justify-content: center, align-items:center

or you can use grid:

Display: grid, place-items: center

I hope this help you, nice work, congrats

1

weronika 50

@WerSzpe

Posted

@FerZva thank you!

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