What are you most proud of, and what would you do differently next time?
This is my first time doing something like this after school. Next time I'd change the order of how I did things.
What challenges did you encounter, and how did you overcome them?
How to position elements intuitively instead of guessing.
What specific areas of your project would you like help with?
Practice with positioning and what some of the best strategies are.
@SvitlanaSuslenkova
Posted
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.
Hope you found this comment helpful :)
Marked as helpful
@MikDra1
Posted
I encourage you to use this technique to make the card responsive with ease:
.card {
width: 90%;
max-width: 37.5rem;
}
On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container {
display: grid;
place-items: center;
}
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
Marked as helpful
@Gnarlsley
Posted
@MikDra1 Thank you MikDra, I have been holding off on using grid and flexbox until I have a good understanding of the relationships present within the box model. What are your thoughts on my approach of withholding use of these display properties?
@leroyg-m
Posted
I think it came out good. The links need to be removed to avoid destruction. But in all, it was a good design.
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
