All comments

• 

  Shiva kumar• 40

  @rshiva

  Submitted about 1 year ago

  I'm not sure why the source image is not working on screen size above 600px

  

  Product Preview Card

  1

  30

  

  Okkie14• 330

  @Okkie14

  Posted about 1 year ago

  Hi @rshiva

  First of all, well done with your solution

  With regards to your code not working on 600px Your CSS code reads as follows: @media (min-width: 600px) Change it to: @media screen and (min-width: 600px) and it will work perfectly

  Take care and happy coding

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Abanoub Ashraf Fawzy• 40

  @Abanoub-Ashraf1

  Submitted over 1 year ago

  Give me your Feedback

  

  Product preview card component

  1

  60

  

  Okkie14• 330

  @Okkie14

  Posted over 1 year ago

  @Abanoub-Ashraf1 You did an amazing job here, looking through your code I saw a few things that were pointed out to me as well

  1. Don't use a h6 tag before an h2 tag(I made the same mistake here), in the css just style the different tag to get them bigger or smaller.
  2. On font sizes px are fixed, making your website more responsive I would recommend rem, you can read more on rem here: https://developer.mozilla.org/en-US/docs/Web/CSS/rem
  3. Just have a look the mobile img is different to the desktop img using the <picture> element can solve this read here to see how to use it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
  4. Lastly your media query isn't stacking the content but rather keeping the box. I would recommend having a look at that, on tablet devices (not part of the assignment I know) it gives side scrolling just something to look at as an additional challenge.

  Hope this helps :-)

  1

  This comment has received 1 replyShow