Design comparison
SolutionDesign
Solution retrospective
please give me your opinion about this simple card to improve myself and follow me to start sharing projects together , and know that i have been made this card without any css framworks , have a nice day
Community feedback
- @hitmorecodePosted about 1 year ago
- You don't need to add margin on the body, you can remove it.
- Always use
min-heigh: 100vh;
instead ofheight: 100vh;
- For this challenge you only need one media query.
- Lines that are commented out, can be removed.
- You need to place all text in the middle
text-align: center;
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; /**/ /* margin: 0; */ background-color: hsl(220, 15%, 55%); font-family: 'Barlow Semi Condensed', sans-serif; } @media (max-width: 375px) { /* body { align-items: flex-start; } */ .container { width: 250px; /* height: auto; */ /* margin: 10px; */ /* } .container .photo { width: 100%; height: 150px; margin: 0; } .container .content { margin-left: 0; width: 100%; } */ }
1 - @AkhatmirzoPosted about 1 year ago
Very cool. But you need to adjust width and height. I would advise you to use Flex for css. Please do more with Colors. In the existing Design: pay attention to the views of the background and the text.
0
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