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 product preview card

ola-dev 60

@Ola-star-coder

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

@Ritika-Agrawal811

Posted

Hey, good job on the challenge

I saw your code and would like to point out that you don't have to repeat all the properties for an element inside a media query.

For example, I noticed that for the body tag you have below properties outside the query:

body {
    background: hsl(30, 38%, 92%);
    padding: 30px 0;
    margin: 1rem;
}

and then inside the media query you have these :

  body {
        background: hsl(30, 38%, 92%);
        padding: 60px 0;
        margin: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

because you are not changing margin and background color, you can remove those properties from inside the media query. Those rules will be applied automatically for all screens. This is will help greatly reduce your CSS code!

Hope this comment was helpful!, Happy coding! 🙂

Marked as helpful

0

ola-dev 60

@Ola-star-coder

Posted

@Ritika-Agrawal811 Okay thanks, It really helped

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