Blog Preview Card using HTML/CSS

Solution retrospective
I am most proud of the fact that I was able to solve problems using online resources.
What challenges did you encounter, and how did you overcome them?I had trouble centering certain stuff, however, I managed to fix them.
What specific areas of your project would you like help with?Feedback on accessibility, and best practices.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @DylandeBruijn
Hiya @timdogan0,
Great job on a good looking solution to this project! Happy to hear that you were able to solve your problems using online resources. Being good at problem solving and finding the information you are looking for is a good skill to have in your arsenal.
A bit of friendly constructive feedback:
-
I suggest changing the
height: 100vh;
on yourbody
tag tomin-height: 100vh
. The reason why is when your content grows vertically in thebody
you'll run into overflow issues when theheight
is more than100vh
. By setting amin-height
thebody
is still able to grow beyond100vh
but100vh
at a minimum. You can check this by giving your card text a lot of characters. -
Try adding some
padding
to yourbody
this makes sure your card has some space between the viewport edges and itself on smaller viewports. -
You could try using CSS variables to make your code more reusable.
-
You have a double declaration for the
max-width
of the image. One is coming from the reset and one from the image class. You can remove the one set on the image itself. You also don't needflex
on the image. So your new styling would be:
.card-image { /* display: flex; */ /* justify-content: center; */ border-radius: 10px; /* max-width: 100%; */ margin-bottom: 1.5rem; }
The commented out lines are the ones you can remove.
I hope you find my feedback helpful and I would appreciate it if you could mark it as helpful if it did!
Happy coding!
Marked as helpful -
Join 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