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-preview-card-component

#sass/scss
Lenez 440

@lenez12

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


  1. I'm still not sure to determine the position whether to use flexbox or by using float
  2. when to use img tags and div tags
  3. is it right to use flexbox or grid

Community feedback

@miranlegin

Posted

Hi Lenez,

congratulations on completing this challenge! You did a great job here and there are only couple of tweaks to make it even better in my opinion.

  1. remove the height on main element, you will see that the text__content is no longer nicely spaced vertically so you can fix it by adding padding to top and bottom sides od text__content
  2. you can replace the product__image div with picture element and put inside both images for mobile and desktop versions accordingly. there is an example on my channel regarding this technique and you can learn more information on this article Picture element with art direction
  3. as you already have border-radius declared on main tag, you don't need to declare it once again on product-image, just add overflow:hidden to hide anything that might stick outside of it

Keep coding!

1
Lenez 440

@lenez12

Posted

Thanks Miran, in the third point doesn't the mobile version have a different border-radius position? so if I make overflow:hidden then it is not as expected on the mobile display.

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