Design comparison
Solution retrospective
I'm glad I managed the cards to look relatively similar to the preview. I optimised for 2 sizes, mobile and desktop, however in future I would like to re-do it in a way that the design looks good on tablet or semi-large screens, i.e. changes to 2 column as opposed to currently showing 3 which is not as nice as I would like to.
What challenges did you encounter, and how did you overcome them?While I thought this would be just another simple challenge that would cement my CSS knowledge, I actually had a moderately hard time trying to figure out how to make all the images, texts and titles in the correct position. I ended up using flexbox styles, since all the other attempts failed.
What specific areas of your project would you like help with?I struggled with keeping the card titles within card borders when changing screen size. When shrinking the screen, the cards get proportionally smaller while the title gets pushed up outside the upper border. I'm not sure how to stop it and only keep the title within the card lines.
Community feedback
- @haquanqPosted 3 months ago
Hello @kristinakasalova 👋
Here is my feedback on how you can improve your solution:
- About keeping card titles within borders, you need to make the text break when meeting the border by specifying
word-break: break-word
as the only element overflowing the card is the paragraph. - You should also consider using
display: grid
instead ofdisplay: flex
to manipulate a grid of items, it is much more robust and convenient. - Consider using more semantic markups instead of
div
(avoid usingdiv
when ever possible, i will explain later) such assection, article, figure,...
.For example, you can choosesection or article
to wrap the card (depend on what context you want to provide - is it a section or article?).
If you want, you can check out my solution for this challenge for more references.
Have a nice day and happy coding! 🕺🕺🕺🕺🕺🕺🕺
0 - About keeping card titles within borders, you need to make the text break when meeting the border by specifying
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