Product preview card using mobile-first css, flexbox

Community feedback

• 

  Zsolt Varjú•490

  @zsoltvarjuPosted over 1 year ago

  Hello Balázs Bánfi!

  I really like your take on this project, i think it's almost perfect if not!

  i also had problems with the bacground image and i found a neat little trick for it:

        <picture>
          <source srcset="images/hero-desktop.jpg" media="(min-width: 1015px)" />
          <img src="images/hero-mobile.jpg" alt="Hero image">
        </picture>
  

  You can use the <picture> semantic HTML tags in your html folder. If you use the srcset attribute inside the <picture> tags and use the media attribute you can set the min or max width at which the <img> src will be swapped to the srcset image! i find it really easy to use and use all the time when i can.

  Your code seems fine to me, try to use comments so it is easier to browse for other and it is a good practice.

  Great work and happy coding!

  Marked as helpful

  0

  ---

  

  BalazsBanfi•280

  @bally4hPosted over 1 year ago

  @zsoltvarju

  Thank you Zsolt, I will try this trick with the srcset it in my next challange :) And I promise, I will write comments ;).

  Have a nice day! Balázs

  1