blog-preview-card-main

Hello coder ! Well done, your work is geat !

I have a suggestion that might interest you.

• Right now, you are using margin properties margin-left: 35% and margin-top: 15% to position the .carrecontainer, which is not optimal for responsive design. On smaller screens or different viewports, this can lead to misalignment or improper spacing.

• Instead, you can use Flexbox to center the .carre container both horizontally and vertically, which will ensure better responsiveness and centering across all devices.

/* Apply Flexbox to body for centering the main content */
body {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    height: 100vh; /* Ensures body takes full viewport height */
    margin: 0; /* Remove default margin */
    background-color: #F4D04E; /* Retain background color */
}

.carre {
    width: 100%;
    max-width: 400px; /* Set a max-width for better readability on large screens */
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid black;
    box-shadow: 10px 5px;
    margin: 20px; /* Adds some spacing around the container */
}

I hope it's can help. Have a great code !