Skip to content
Submitted 4 months ago

Product preview card component

AymaneOnline•330
@AymaneOnline
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I took way more time than needed on this challenge, so inshallah I'll try to be faster next time.

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

This was a good challenge, as it differs from the other challenges from the learning path with the presence of two images one for desktop and another for mobile. It took me some time to figure out how to make it work when I deployed it on GitHub.

First, as I've been using the mobile-first design I put the mobile image on the HTML with the `` tag and then changed it with a media query, it did work locally but not on deployment. So to make it work, I've put both the desktop and mobile images on the html file, and using the media query I've changed the display property from "none" to "block" and vice versa and that resolved the problem.

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

I've got a problem concerning the performance of this page on mobile devices as I couldn't surpass 93/100 score on Lighthouse. I tried to change the image format from .jpg to .webp which dropped the image size by nearly 50%, and I also changed the fetchpriority attribute of the images using both values "low" and "high" but it didn't work. I would love to get some help from you guys on that.

Community feedback

  • Bamo-D-Abdallah•280
    @Bamo-D-AbdallahPosted 4 months ago

    it is better to use rem instead of px.

    0
    AymaneOnline•330
    @AymaneOnlinePosted 4 months ago

    @Bamo-D-Abdallah Do you mean that I need to change every px in the code to rem ?

    0
    Bamo-D-Abdallah•280
    @Bamo-D-AbdallahPosted 4 months ago

    @AymaneOnline yes, never use px, always use rem and for some cases use em.

    Even for @media use rem:

    @media (min-width: 30rem) {
    .card {
       max-width: 10rem;
   }
}
    0

Please log in to post a comment

Log in with GitHub

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