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

HTML CSS

Muriel M. 470

@MurielM87

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

@Anas-95

Posted

Hi Muriel, great job!

I have a couple of suggestions: consider removing the black border from the "Add to Cart" button and using more semantic HTML elements to improve readability.

Marked as helpful

0
P

@whiteriver-dev

Posted

Everything looks good and very similar to design. One thing I noticed is that if you open the site in a windowed mode (in desktop size) and play around with the window sizes, the container for your content doesn't stay in the middle. This is because you set:

    margin: auto;
    margin-top: 60px;

This makes your left margin also 60px. This means that your image can slightly move but as soon as the margin hits it will no longer move. So if I open your site with a half open browser, the image will be half out of view.

The way I would solve this issue is add margin only for the mobile view but as you can center the container using flexbox - you do not need a margin for the desktop version as all the content is already centered:

    display:flex;
    justify-content: center;
    align-items: center;

Marked as helpful

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