responsive blog preview page using flexbox

Hi @jmortada,

Congratulations on successfully completing the challenge!

Your solution looks nice, though there are a couple of things you can improve which I hope will be helpful!

1. Using max-width for .main

Instead of using percentage-based width and height for .main, which is not a best practice, you can use max-width: 400px; (or a width of your choice). This will give the card a fixed maximum width and reduce the card width if the screen size is smaller than the specified width.

.main {
    max-width: 400px;
    width: 100%;
}

2. Improving Content Alignment Inside .main

The technique you used for aligning content inside .main can be improved. Instead of using:

justify-content: space-evenly;
align-content: space-around;
flex-wrap: wrap;

You can use the gap property to add gaps and padding for more effective alignment:

.main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

3. Adding Border and Increasing Border Radius

Add a border to .main and increase the border radius to make it more curvy at the corners:

.main {
    border: 1px solid #ccc;
    border-radius: 15px;
}

Summary

1. Use max-width for .main instead of percentage-based width.
2. Use the gap property and padding for effective alignment inside .main.
3. Add a border and increase the border radius for a more polished look.

I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!