Design comparison
Solution retrospective
The main thing I struggled with was making sure the design was responsive and making the div remain in the centre. From researching this I found this can be done by using margin: auto; in CSS.
Since I haven't covered flexbox yet im sure there are better ways to achieve this.
What challenges did you encounter, and how did you overcome them?The main thing I struggled with was making sure the design was responsive and making the div remain in the centre.
What specific areas of your project would you like help with?Any detailed guides on CSS styling would be appreciated!
Community feedback
- @HummingcoderPosted 4 months ago
give container display grid and place-content center to center the card
0 - @DylandeBruijnPosted 4 months ago
Hiya @RKennedyy,
Congratulations on completing this project. Your solution looks great! Being able to do research to achieve the result you want is a good skill.
A bit of friendly constructive feedback:
-
Try using more descriptive classes for your HTML elements, like
.card
and.card-title
for example. This makes it easier for you to understand and style your elements and for other developers to read your code! -
To get the card to sit in the middle it's indeed easier to do with Flexbox. I suggest reading about it to understand it more. This is a great resource.
-
Try using a
main
as your main element in thebody
. This wraps all your other elements. -
You could make your color and font values more reusable by using CSS variables / custom properties.
If you have any specific questions let me know and I will be happy to answer them. If you find my feedback helpful I would greatly appreciate it if you could mark my comment as helpful!
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