Submitted about 2 months ago

Blog Preview Card, My Version

Vincin Christmas• 130

@VincinChristmas

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?

It was easier to understand most of the design styles and requirements for this project because it is my second one. I didn't understand the 'active states' requirements though. I just took a wild guess and added hover to some elements.

I really need to understand responsiveness though. I am still not sure when to use media queries. I will review this concept in my own time.

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

Not so many challenges, except when I didn't pay attention to my screen zoom settings. I thought I had some css problems but I checked and say my screen was zoomed out to about 75%.

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

Responsiveness and media queries

Community feedback

voespinal-code• 50

@voespinal-code

Posted about 2 months ago

hey hello, I like your design and the way you have organized your HTML. Regarding Responsiveness and media queries you only need small adjustments. With Flexbox you can quickly center your design right in the middle of the page.

you have a div called whitebox, you have to apply the media to that div. @media(max-width:375px){ .whitebox{ width: 300px; } } With this you tell it that when the screen is smaller than the indicated pixels, the size of your div will change to 300px

Marked as helpful

Vincin Christmas• 130

@VincinChristmas

Posted about 2 months ago

ok thank you@voespinal-code

Edun Joshua Olubori• 120

@JoshuaOlubori

Posted about 2 months ago

Excellent work

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