Non-Responsive landing Page in HTML and CSS, Flexbox and margins.
Design comparison
Solution retrospective
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
- @mkborisPosted 3 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
andmin-height
only when essential, and use relative units likerem
to enhance flexibility. Currently, the text and the avatar seems to be sticking out from the card on smaller screens, to fix that remove theheight
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 inrem
not px.Hope this helps
1
Please log in to post a comment
Log in with GitHubJoin 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