Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive design for Product preview card component

@lawalOyinlola

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@ZubairAbid101

Posted

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

@lawalOyinlola

Posted

@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

@lawalOyinlola

Posted

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
Discord logo

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