Submitted about 2 months ago

Non-Responsive landing Page in HTML and CSS, Flexbox and margins.

Christopher Mothuli• 50

@Sirch9

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'm of most that I'm trying, I don't see progress, hopefully in the next 10 projects I will. Because every line of code, I google.

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

I struggled with responsiveness , had to bail on it. { display: flex justify-content: center; align-items :center;

These code centers my property to the center vertically only and not horizontally. Please explain why ?

I used a different font ,to see if my external fonts really worked. I couldn't tell with my naked eye.

My font or letter are in uppercase and couldn't figue out why ?

I actually want to create a responsive card. but I struggled any tips ? }

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

Font selection...Which fonts are standard practice. Responsiveness... Best way to approach it.

Community feedback

Boris• 2,870

@mkboris

Posted about 2 months ago

Hi Sirch9 nice work, to create responsive layouts, avoid fixed heights and widths as they can hinder layout adaptability and content flow. Instead, allow padding and content to determine element sizes. Use max-width and min-height only when essential, and use relative units like rem to enhance flexibility. Currently, the text and the avatar seems to be sticking out from the card on smaller screens, to fix that remove the height completely from the .blogCard and it should be fine. For fonts selection, the fonts used can found in the style-guide file but you can use any font you like that's up to you really. Also, font-size should be written in rem not px.

Hope this helps

Christopher Mothuli• 50

@Sirch9

Posted about 1 month ago

@mkboris Thank you so much.

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