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

Product-preview-card

P
Raghad 10

@raghadalju96

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

@husamasaad

Posted

Hello my Friend, Welcome to the Front End mentors community, you did a great jop in your first challenge, I wish you a very happy journey and here are some tips :

  • try usig semantic HTML eg: <main>, <section>, <article>, instead of divs it better for accessability

  • on your .center div you have a padding tob and bottom and a transform translateY, try to hide these lines and see how it will look >, your display flex on the body already is making every thing on the center so no need for all of that and i think that is whatgiving you the side scroll... (giving the parent element display flex + align items center is enough to put the child in center)

hope this was helpful , and keep going my friend

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