Skip to content
Submitted over 1 year ago

Responsive design for Product preview card component

Lawal Oyinlola•30
@lawalOyinlola
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

Community feedback

  • Zubair Abid•280
    @ZubairAbid101Posted over 1 year ago

    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
    0
    Lawal Oyinlola•30
    @lawalOyinlolaPosted over 1 year ago

    @ZubairAbid101 Thank you for the feedback , I'll work on my repository. I was trying to use basically HTML and CSS as suggested by frontendmentor. Also I'll remove the outter <div> , I was trying to avoid changing the flex direction.

    Thanks again for the tip! Looking to try out the last point

    0
  • Lawal Oyinlola•30
    @lawalOyinlolaPosted over 1 year ago

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

    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