Skip to content
Submitted 9 months ago

Product Preview Card

EmicJoykiller•270
@EmicJoykiller
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 easily achieved the mobile design first, implementing all the styling and typography. However, I would like to learn and use SASS for my next projects.

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

"I had some difficulty transitioning from the mobile layout to the desktop layout. Eventually, I was able to implement the desktop layout query, but not in the way I expected or with a responsive approach, as I had to use some hardcoded details.

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

I need help learning how to design and implement responsive layouts from the start of a project, including specifics like how to use containers, how many sections or divs to include, and how to style them with CSS to achieve the desired results. Any guidance in this area would be greatly appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Jan•290
    @Jan-Dev0

    The mobile version looks good. However, the desktop version has some issues with the size proportions – it appears too large. Here are a few suggestions for improvement:

    1. CSS Reset: Implementing a CSS reset might be beneficial to set margin and padding to zero and use box-sizing: border-box. This ensures a consistent layout across different browsers.

    2. Font-Size: The font-size is set to 16px in :root. Instead, you could use html { font-size: 62.5%; } which makes calculations for rem values easier – 10px will equal 1rem, simplifying the math.

    3. Image Sizes: For images, consider using srcset or the picture element to handle different screen sizes. This allows you to optimize images based on max-width or min-width of the viewport, improving performance and responsiveness.

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