Product card solution

Community feedback

• 

  Florent Vandroy•510

  @florent6001Posted over 2 years ago

  For the button, you can actually put a <a href=""></a> instead of <button>. It's a fake button for this component, so you can also just put a css rules pointer: cursor when the button is hovered.

  Marked as helpful

  1

  ---

  

  Phúc (Scott) Nguyễn•430

  @NationsAnarchyPosted over 2 years ago

  @florent6001 Yeah that's right - I always forget that one. Thanks!

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Phúc, congratulations for your new solution!

  I saw your code and in this case is better you use picture to manage these images instead of using a <img> and display: none to swap the images.

  You can manage the product image inserting the tag <picture> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html If you're not familiar with the picture tag you can look at the documentation to see how to set it: https://www.w3schools.com/tags/tag_picture.asp

  👨‍💻 Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Phúc (Scott) Nguyễn•430

  @NationsAnarchyPosted over 2 years ago

  @correlucas Thank you Lucas! I'll have a look at your own solution soon. Great to see you respond quickly!

  0
• 

  Gaurab Bhowmick•90

  @Gaurab019Posted over 2 years ago

  Hey, I am not sure about the font family but on the product image thing you can use the flex wrap property of the flexbox to wrap it........you can also change the flex direction to column when you hit the media query.

  You can put button:active to change the behavior of the button when clicked....

  1

  ---

  

  Phúc (Scott) Nguyễn•430

  @NationsAnarchyPosted over 2 years ago

  @Gaurab019 I think I tried flex-direction to column, didn't work though ... Thanks anyway!

  1

  

  Florent Vandroy•510

  @florent6001Posted over 2 years ago

  @NationsAnarchy I tried and it's work. You have to change the flex direction on the card class.

  2

  

  Phúc (Scott) Nguyễn•430

  @NationsAnarchyPosted over 2 years ago

  @florent6001 Let me give that a run, thanks Florent!

  EDIT: Got the mobile image working, finally :D Thanks, everyone! I guess I'll just leave the button as of it for now.

  1