@ZHADOW999
Posted
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
1
Design comparison
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
Community feedback
Shoaib Shuja• 560
@ShoaibShuja
Posted
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
1
Vinayak• 300
@V102002
Posted
Thanks a lot! I was having tough time figuring it out. I feel so stupid , looking at this simple code. I am open to more feedback to make a cleaner CSS code @ShoaibShuja
1
Shoaib Shuja• 560
@ShoaibShuja
Posted
No, my friend don't insult yourself we are all here to learn and you did amazing.
1
Vinayak• 300
@V102002
Posted
Thanks friend@ShoaibShuja
1
Please log in to post a comment
Log in with GitHub
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