Image Card using flexbox

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, perhaps some of this may interest you:

  ** HTML 🧱, ACCESSIBILITY ⚖:**

  🔹This is a clear case for using the <picture> element, which allows the display of different images for different devices or screen sizes.

  <picture>
   <source media="(min-width: X)" srcset="images/image-product-desktop.jpg">
   <img src="images/image-product-mobile.jpg" alt="A good description">
  </picture>
  

  🔹The image of the perfume is meaningful and therefore the alt text should give a good description in case the user cannot see it for some reason. On the other hand, the image of the cart is decorative and the way to set an image as decorative is with the empty alt attribute so a screen reader will ignore it (without the empty alt attribute it can read the file name).

  🔹'Perfume' should be capitalized with CSS and not in HTML for accessibility reasons (using 'text-transform: uppercase;').

  🔹The <del> element is very suitable for the old price ($169.99), and it could make sense to add a screen readers-only clarification with the .sr-only class, which will be hidden with CSS, to prevent confusions.

  ** CSS 🎨:**

  🔹Regarding the size of the images, you shouldn't need to do anything in the mobile version. And in the desktop version, the easiest way is to use Grid for the card and then divide it into two equal columns.

  main {
          display: grid;
          grid-template-columns: 1fr 1fr;
  }
  

  🔹Also, as part of the CSS Reset, the following is very useful regarding images:

  picture,
  img,
  svg {
    display: block;
    max-width: 100%;
  }
  

  🔹It might be good to get used to designing with the mobile first approach, which means designing for mobile first and then for desktop or any other device. This is important for reasons like: increased use of mobile devices, simplified design (focus on core content and easy navigation), easier to scale up. It will also make the page display faster on smaller devices.

  Please let me know if you disagree with something or if you want more information.

  Regards

  Marked as helpful

  0

  ---

  

  Semil Khedawala•30

  @semil338Posted over 1 year ago

  So the main's width would be 50% ?? @fernandolapaz

  0

  

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  @semil338 The card should have almost the same width as the body in the mobile version and a max-width equal to the width of the design (600px) in the desktop version.

  Marked as helpful

  0

  

  Semil Khedawala•30

  @semil338Posted over 1 year ago

  Thank you 😊@fernandolapaz

  0

  

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  @semil338 You are welcome 🙂

  0