Submitted about 1 year ago

Blog-Preview (Revision)

Vinayak•320

@V102002

A solution to the Blog preview card challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I finished this in within an hour. It was a good revision

What challenges did you encounter, and how did you overcome them?

Adding the box shadow, had to refer chatgpt for that and the mobile version of the design

What specific areas of your project would you like help with?

This was more of a revision and I was designed it within an hour

Code

Please log in to post a comment

Community feedback

Babalola victor ayomide•430
@ZHADOW999
Posted 12 months ago
also bolg-container set the height to auto and remove the margin-top on the preview-img it will look better like that 😁
Marked as helpful
Shoaib Shuja•590
@ShoaibShuja
Posted about 1 year ago
Amazing Job my friend but the card dosen't seem to be perfectly centered within the body.

To fix this issue remove the margin-top and margin-left from .Blog-container class and add the following code to your css file.
```
body {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column // To make sure the attribution goes under the main card
}
```
And also, to put the attribution which contains the challenge's author name perfectly to the bottom also copy these lines of code to your CSS file:
```
.attribution {
    position: absolute;
    bottom: 0;
}
```
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