Product preview card component solution with Flex, External Css and Re

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Eren, your component looks great! I'd probably would just add some padding around the card's container element, which in your case is the body element; otherwise the sides of your component is touching the sides of the viewport.

  Also, you can try using the letter-spacing property instead of manually adding spaces in "Perfume"; you can start with letter-spacing: 1px and then just see how much spacing you'd need. You can also use text-transform: uppercase instead of manually typing out the capital letters.

  Lastly, I see that you have both the mobile and desktop images in the HTML, and I'm guessing that you are using display:none with a media query to switch between the two, which works as a solution. You can also try using responsive images with the <picture> element; you can place both images in the element along with the proper settings, and then let the browser choose the image to display. More on that here on MDN.

  Once again, great job on your second challenge!

  Marked as helpful

  1

  ---

  

  erenseven•50

  @ErenSevenPosted over 2 years ago

  @elaineleung thanks for your nice words, i will pay attention to what you said in my next solution, thanks again for this great feedback

  1
• 

  IRVINE MESA•1,855

  @DrMESAZIMPosted over 2 years ago

  hi Eren

  you solution looks okay . I do have some suggestions to make it better we need to resolve on its height and width which are too large by default. remember you will also need to edit the height and width for mobile view. take note we have to tell the browser which image to display for different screen sizes

  If you find this a challenge to resolve let me know and I could do a YouTube video for your editing your project code

  0