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

feyzar22 10

@feyzar22

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feel free to check and tell me how could be done better.

Community feedback

Linas 100

@getlinas

Posted

Hey man, you're using margin to center container, but it looks off on different browsers/computers then yours. You should use "flex" for that. Looks it up or can check my code, I 've just submitted same exercise.

Basically, you can center any object inside of it's parent by setting these properties to your container:

.mainclass-container { display: flex; justify-content: center; align-items: center;

}

Check what it does (don't forget to remove margins).

Also, desktop version should start showing way sooner then 1440px width. It file Frontend Mentor says that design was made with 1440px wide screen in mind, but it's not a breaking point.

Good luck! :)

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