Skip to content
Submitted 10 months ago

Responsive product preview card solution by @Gonzz

gonzzdev•70
@gonzzdev
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I would animate interactions and write with better semantics next time.

What challenges did you encounter, and how did you overcome them?

Learning how and where to investigate when solving a problem

What specific areas of your project would you like help with?

Any feedback will be truly appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Boris•4,110
    @makogeboris

    Here are a few things to review

    • To properly center the card use flexbox. add this on your body and remove the margins from the .card
        display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    • To handle responsive images effectively you can use the picture element. This allows you to specify different images for various screen sizes and resolutions.
    • It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.
    • Media queries should be defined in rem not px
    • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
    • Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.
    Marked as helpful

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