Product Preview Card Component Main using HTML/CSS

Community feedback

• 

  SHMITEnZ•80

  @SHMITEnZPosted about 2 years ago

  Ciao Jo!

  Congrats on your solution, it really looks good!

  For the images I personally used the HTML picture tag, with the below code:

  <picture>
          <source media="(max-width: 640px)" srcset="images/image-product-mobile.jpg">
          <source media="(min-width: 641px)" srcset="images/image-product-desktop.jpg">
          <img class="p-img" src="./images/image-product-desktop.jpg" alt="">
  </picture>
  

  Hope this helps!

  Marked as helpful

  2

  ---

  

  Jo Blaszak•110

  @jblaszakPosted about 2 years ago

  @SHMITEnZ thank you so much! Definitely going to add this one to my notes. Didn't realize you could use this tag!

  0

  

  Jo Blaszak•110

  @jblaszakPosted about 2 years ago

  @SHMITEnZ Added the picture tag and noticed that a CSS reset to display: block was also required to remove a white space at the bottom.

  1

  

  SHMITEnZ•80

  @SHMITEnZPosted about 2 years ago

  @jblaszak Yes I had the same issue with the white space, I solved it by setting height: 100% on the img. I didn't think about display:block. Thanks!

  1

  

  Jo Blaszak•110

  @jblaszakPosted about 2 years ago

  @SHMITEnZ According to this site, the issue is caused from img/picture being treated like an inline element, which causes them to have a line-height property that messes things up as described here

  1
• 

  Omar M.•270

  @OmarMAttia7Posted about 2 years ago

  Hello, congratulations on finishing the challenge and submitting your solution.

  • For starters, like @SHMITEnZ said the <picture> element is a good solution for responsive images in HTML, to learn more about it in depth I suggest you read this guide by MDN.
  • You should wrap all sections of your document in landmarks to improve accessibility, in this case, you should wrap your card component in a <main> element since it is the only thing on the page, however if you have a bigger document with more content you would probably wrap it in a <section> or <article> or it would be in a bigger component wrapped in one of these.
  • Lastly your .card class has an overflow: hidden attribute, this will prevent people from scrolling on shorter screens, try decreasing your browser window's vertical size to see for yourself. you should remove it, I'm curious as to why you added it?

  Otherwise you did a fantastic job, good luck and keep coding :).

  Marked as helpful

  1

  ---

  

  Jo Blaszak•110

  @jblaszakPosted about 2 years ago

  @hazel79 Thanks! After uploading and seeing the issues report I've added some more WAI-ARIA roles and the main tag.

  Also something to note about the <picture> tag, it's got a white space at the bottom by default. Would need to add display: block line to the CSS to fix it.

  Thanks for pointing out the overflow issue too! As I was putting the component together I was tinkering with stuff and forgot to delete that. Hard to notice when everything looks fine. >_<

  0