Design comparison
SolutionDesign
Solution retrospective
All feedback is wellcome
Community feedback
- @kimodev1990Posted 11 months ago
Really great work on completing the challenge, Just few feedbacks :-
- Wrap your container under main tag, for example :
<main> <div class="container"></div> </main>
- To center your container in the middle of your website, Instead of using
margin: 100px 0 0 550px ;
, You could add in the body :-
display: flex ; justify-content: center ; align-items: center ; min-height: 100vh ;
then your container will be centered.
- In the future, It's better to assign percentage values instead of definite values for making flexible & responsive design. For example, Instead of
width: 240px :
in your image ,you could assignwidth: 90% ;
, so the width of image is 90% in relative to width of container in different viewport dimensions .
Hope you find this Helpful.
Other than that, Nice work & Keep going on....
Marked as helpful1 - @danielmrz-devPosted 11 months ago
Hello @Eyu32
Your project looks great!
I have one minor suggestion for you to improve it:
- If you add
height: 100vh
andalign-items: center;
to the body, your card will be placed in the middle of the page. You can do like this:
body { height: 100vh; /* here */ display:flex ; flex-direction: column; justify-content: center; align-items: center; /* and here */ font-family: sans-serif ,"popins"; background: rgb(204, 219, 231); }
By doing that, you don't need margins or paddings to move the card from the borders.
I hope it helps!
Other than that, great job!
Marked as helpful1 - If you add
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