Skip to content
Submitted 3 months ago

Responsive product review with flexbox and sass

Jaime•150
@Jaimealicante83
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

What are you most proud of, and what would you do differently next time?

I did it quite quickly and with no many problems.

What challenges did you encounter, and how did you overcome them?

Aligning the content horizontally in desktop version. I used flexbox display row to solve it.

What specific areas of your project would you like help with?

How to improve the look and efficiency of the code.

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 3 months ago

    Hey!

    Great work, but I really think that you should use img tag here instead of background image. You see, backgrounds good for decorative pictures which doesn't bear any context meanings. And the img have an alt attribute with description for assistive technologies.

    To switch images in the different versions you can use picture tag.

    <picture>
    <source srcset="mobile.jpg" media="(max-width: 900px)">
    <img src="desktop.jpg" alt="">
</picture>

    It contains one (or more) source tags with different media conditions. If no one of the medias will match, the img would be rendered.

    Oh, and also all your media queries have min-width: 1024px. They would be overwrite each other that way =)

    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