Blog Preview Card using HTML/CSS

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 your body tag to min-height: 100vh. The reason why is when your content grows vertically in the body you'll run into overflow issues when the height is more than 100vh. By setting a min-height the body is still able to grow beyond 100vh but 100vh at a minimum. You can check this by giving your card text a lot of characters.

• Try adding some padding to your body 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 need flex 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!