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

Product Card Component

Kofi Akyea 150

@Takeda-harsh

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


I had issues replacing the desktop image with the mobile one when i was coding for the mobile version. I ended up resizing the desktop image and it didnt look so good. Any help? Thanks

Community feedback

Jean Chris 160

@john-coderpro

Posted

hello kofi , congratulations for completing this challenge! here are some points you can look at to improve: -it's generally a good idea to follow the mobile first workflow, where you start to think about the mobile look first and use media queries to code style for greater screen sizes

-media queries are great but you can use relatives units (em, rem, vw, vh ...) to benefit from natural responsiveness, that will ensure that your site looks great on any screen size rather than only on specific sizes, for instance , for screen sizes between 480px and 700px your card won't look great because an horizontal scrollbar will appear

-for the problem of your image you can use the srcset attribute which allows the browser to choose the image with respect to the screen size, you can learn more about this attribute at https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

-for accessibility, the accessibility report has surely given you a lot of feedbacks to take into account lol :)

by the way I'm still learning to make comments on front end mentor, I'm not acquainted yet on how to use it properly

hope it helps

0

Kofi Akyea 150

@Takeda-harsh

Posted

@john-coderpro this was very helpful. doing the mobile version first makes things easier when developing for bigger displays. thanks a lot

0
Jean Chris 160

@john-coderpro

Posted

@Takeda-harsh , okay glad 😊 to hear it has helped you, also don't forget to upvote the comment so that others can see it was helpful and benefit from it too.

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