Design comparison
Solution retrospective
1.Getting start. 2.Stylesheet codes. 3.No,i strongly believe that "the real learning start's only when you practice it.
AND KEEP PRACTICING.......
Community feedback
- @0xabdulkhaliqPosted almost 2 years ago
REPLY:
- The card component is not aligned well
- During inspection i found that you applied unnessacary margin on
.card
RESOLVING THE ERROR
- Resolve the following css styles
- Remove
margin: 20% 5%;
from.card
component, it resolves misplacing of div - Apply
height: 100vh;
forbody
tag, It resolves page overflow error - Finally apply
display: grid;
&place-items: center;
on body tag, which helps to center our.card
with grid layout
MESSAGE:
- If my answer helps you then providing an upvote will be very helpfull
- I hope you learned a lot of stuffs during this project, Congrats brother
GREETINGS:
- Peace be upon you with god's mercy & blessings Mugilan nanba..✨
Marked as helpful4 - @AdrianoEscarabotePosted almost 2 years ago
Hi Mugilan010, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:
A good practice to center content is using
grid
orflex-box
, avoid using margin or padding to make placements, use only in the latter case! we can do it like this:Flex-box:
body { display: flex; align-items: center; justify-content: center; flex-direction: column; min height: 100vh; }
GRID
body { display: grid; min height: 100vh; place-content: center; }
The rest is great!
I hope it helps... 👍
Marked as helpful0@AdrianoEscarabotePosted almost 2 years ago@Mugilan010 minimum height and
100vh
means it will have the maximum height of the device being used1
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