Submitted over 1 year ago
Semantic HTML5 markup, Flexbox Responsive shopping product card
@Tolux001
Design comparison
SolutionDesign
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello @xTolux001 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
CSS 🎨:
- Looks like the component has been centered correctly. But the issue why the component is pushed from top because of
margin
.
- We don't need to use
margin
andpadding
to center the component both horizontally & vertically. Because usingmargin
orpadding
will not dynamical centers our component at all states, You already centered the component correctly. Now all you wanna do is just remove the following style rule
body { margin: 50px auto; }
- Now your component has been properly centered
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1 - @Tolux001Posted over 1 year ago
Hello @0xAbdulKhalid,
So I was able to take your advice and I worked on another challenge . Please is their any other thing I can improve in this challenge that I didn't do0
Please log in to post a comment
Log in with GitHubJoin 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