Skip to content
Submitted almost 2 years ago

Responsive design for Product preview card component

accessibility
Lawal Oyinlola•30
@lawalOyinlola
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)
Code

Please log in to post a comment

Log in

Community feedback

  • Zubair Abid•280
    @ZubairAbid101

    Hello!!! 👋

    Congratulations on completing the challenge! 🎉

    There are some things that you can improve in the code,

    • I viewed your GitHub. It seems like your creating multiple projects in the same repository. GitHub does not work quite like a folder management entity. Simply put each project needs to be in a separate repository. You cannot simply put other repositories as sub folders of another repository. You CAN, but try not to.
    • The outer most <div> component is not necessary. You can simply remove it. The <main> element should be the direct child of the <body> element.
    • Try using JavaScript to dynamically change the src path for the <img> element using event handles. Your mobile design looks good.
    • To make the image responsive create a div element for the image in question. Give it a width property and then set the <img> element to width: 100% and height: 100%.

    I hope you find this comment helpful! 🙂

    Did you know that there's a mark as helpful and an up-vote option? 🤔

    There's even a Follow button!!! 😁

    Happy Coding!!! 💻

    Marked as helpful
  • Lawal Oyinlola•30
    @lawalOyinlola

    I could use some help on why my screnshot looks way larger than the design. Thanks!

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