Skip to content
Submitted over 2 years ago

Product Preview Card Component Design

allys•90
@allyskorsah
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

For this project, the issue I had was in deciding how to have the image displayed. To display it as as an ordinary image or to display it as a background image for an element. In the end I settled for displaying it as a background image since I could manipulate that better.

In your opinion which is the best to use(displaying as an ordinary image or as a background image) and how best to manipulate it to get desired results.

Thanks for your contribution and feedback.

Community feedback

  • Account deleted

    Hi Allys,

    I myself used a background image for this challenge. However, looking back, I think putting it in the HTML instead would be a better solution for accessibility - No alt tags for background images in CSS unfortunately... not sure if there are workarounds for this, but after a quick Google search, it does seem like the easiest solution would be to put it in the HTML instead.

    0
    allys•90
    @allyskorsahPosted over 2 years ago

    @LazyDuckling thanks for the feedback. I actually put it in the html at first but since the image would be changed when the screen is in mobile size I couldn't figure out how to make the switch. I'd have to look that up later. Thank you.

    0
    Account deleted

    @allyskorsah You can give classes to images, so you should be able to change it however you need to in your media query :)

    Marked as helpful
    1

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