Skip to content
Submitted about 2 years ago

Product Preview Card - HTML & CSS, Flexbox

Carl Fremault•20
@carlfremault
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

Hi,

I have two issues with my current submission:

  • I'm not sure if my solution to add the cart icon to the button is the right one.
  • As far as responsiveness is concerned, I'm happy with the results for the requested sizes (as per the style guide, 375px and 1440px). Strange things happen though for other devices, e.g. iPhone XR with a 896px height, lots of whitespace is added in the middle. I've played around for a while with the different flexbox settings, without satisfying result.

Any pointers would be much appreciated !

Many thanks in advance & best regards, Carl

Community feedback

  • Jacob Marshall•270
    @JacobMarshall0Posted about 2 years ago

    Hi, your code is very good, well laid out and good comments. The button icon can be included in an <img> tag inside the <button> tag, rather than used as a background image.

    Your solution has good accessibility too, with semantic elements and image alts.

    I believe the issue with the mobile size is owing to the min-height or the background-image, try playing around with these.

    Marked as helpful
    1
  • Carl Fremault•20
    @carlfremaultPosted about 2 years ago

    Hi @JacobMarshall0,

    Thanks a lot for your time and feedback.

    For the button. Well yeah obviously :) Not sure why I tried to do complicated things while a simple <img> tag did the trick ...

    For the responsiveness I ended up fixing my min-height in rem instead of %. Not sure if this is good practice but it worked out for all Chrome dev tools preset mobile sizes... except for Galaxy Fold which is narrow and long ... So I ended up adding an additional break point for that (max width 299px). Again not sure if it's good practice but what can you do :)

    Thanks a lot for your help!

    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