Frontend Mentor | Responsive product preview card solution by @Gonzz coding challenge solution

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.

Community feedback

Boris• 2,870

@mkboris

Posted 25 days ago

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

@gonzzdev

Posted 25 days ago

@mkboris Awesome! thank you very much. Both articles are really good. Im already applying the changes 💪🏽

Responsive product preview card solution by @Gonzz