Submitted 3 months ago

Blog-preview-card using HTML, CSS

Ridwan Hasan• 400

@Ridwan10000

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I am proud of that I could make this project using HTML and CSS. I used downloaded fonts in my project for the first time using @font-face property. That was exciting

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

I had trouble centering the card. I made the body a flex container and set justify-content and align-items property to center but it was not centered along the cross axis. I didn't know why. Then I set the height to 100% of the html and body element. I got this solution from chatGPT.

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

As mentioned before I had to center the card setting the height to 100% of html and body element. But before this I did QR-code project. There I hadn't used this. It was working totally fine there without setting the height to 100% of html and body element. Please help me understanding this. Why doesn't it always work?

Community feedback

Darkstar• 1,000

@DarkstarXDD

Posted 3 months ago

Don't set height: 100% on the html. You don't need to set or change any values on html. It could break the site in unexpected ways.
By default <body> or <div> elements won't take the full height of the screen. They will only take the height needed to fit their child elements in. So if you want to center your component on the screen you will have to explicitly tell the <body> or the <div> (whatever is the parent element of your component) to take the full height of the screen by using min-height: 100vh. vh means the viewport height.

Marked as helpful

Ridwan Hasan• 400

@Ridwan10000

Posted 3 months ago

@DarkstarXDD thanks for your suggestion. I had posted this earlier on discord community and got the same solution there.

Please log in to post a comment

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