Design comparison
SolutionDesign
Solution retrospective
Difficulties:
- I had problems trying to get the image to fit into the div with equal white space on all sides. I had to manually adjust the padding-top to make it "fit" (i eyeballed it), because it always seemed to be less than the padding on all sides, even if set with the same values.
- I also had trouble getting the card to appear in the middle of the page rather than be aligned with the top.
Code:
-
I'm fairly confident with my HTML so far, but I'm a little bit unsure with CSS. I'm still wondering when I should re-use an existing CSS rule, or if I should make a new one specifically for a certain element.
-
First time submitting a solution / deploying a Vercel page, so apologies if I broke or missed anything :)
Community feedback
- @Rhiino1Posted about 1 year ago
Great work!
Answering your questions:
- This is a good solution, sometimes vertical padding differs from horizontal, even so you eyeballed, looks good.
- I saw that you use a
display:flexon your body, although it needs more than that to center the content. To do that add to body:justify-content: center; align-items: center; height: 100vh;. Remember with100vhyou are saying to your body to use all the view port, that means it will center your content. - About css rules and elements: If you have a list, you should create a class to style your
<li></li>elements. If you ever need again to create a list as above, then you can re use your class, otherwise create a new one for the new element. So, you can extract styling for different elements and create some shared classes that cover everything, like a success button or an error button, at the end they should have some similarities, but differs it another ways.
Good job, keep it up! :)
0
Please log in to post a comment
Log in with GitHub
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