Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
19
Comments
1
Joseph Benavides
@Joseph-Benavides

All comments

  • Alex•100
    @Alex6pc
    Submitted almost 3 years ago

    Product preview card component

    3
    Joseph Benavides•210
    @Joseph-Benavides
    Posted almost 3 years ago

    Hey there Alex, great work on your card component, I have a few tips for you that could help out!

    To make the layout more responsive you can remove the min-width that you have set on the body.

    Instead of using a <picture> element use a <div> or <img> element instead.

    To insert the corresponding image for mobile, have it set up in your html and in css display it as none, then in your media query set the display as unset, and set the width and height to your liking!

    Marked as helpful

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub