Skip to content
Submitted over 2 years ago

Responsive Card, with Figure and Figcaption

Pawan Bhandarkar•130
@BhandarkarPawan
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

I would love for someone to review the HTML components I used. I decided to go with the Figure and fig caption elements for the card, instead of the traditional div. This felt appropriate based on the descriptions for these elements on the MDN docs. Is there an benefit or caveat to this approach?

Community feedback

  • Asmaa Elfatayry•870
    @asmaa-elfatayryPosted over 2 years ago

    hello Pawan, you do a great job. to remove accessibility issues you should add the attribute alt to the img tag this attribute appears when something wrong happens to the picture then the "alt" text will appear. you can see more here: https://www.w3schools.com/TAGS/att_img_alt.asp

    second : you should add all the content of the body in the <main></main> tag

    1
  • Aychew Seyoum•90
    @Aychew10Posted over 2 years ago

    Good try there!!! ...as for suggestions, use css background property for images in cases like these where u have multiple images for responsiveness sake(desktop and mobile)

    0
    Pawan Bhandarkar•130
    @BhandarkarPawanPosted over 2 years ago

    @Aychew10 Thanks for your comment. Actually, I did not use two different images here. I just used the single desktop image and used object fit:cover to achieve a similar effect as the mobile image.

    0
    Aychew Seyoum•90
    @Aychew10Posted over 2 years ago

    @BhandarkarPawan Yeah, that goes too .....good job anyway

    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