Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

resposnive blog-preview-card with flex-box

@anwar-elbarry

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • 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 my focus on details and finding solotions ,even if it takes me 4 hours or more . Nex time , I will focus on code aesthetics , Organization ,And writing more comments.

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

i want to make it more responsive

Community feedback

py-code314 290

@py-code314

Posted

Hello,

Nice job on the project. I think it is responsive enough, although I wanna make some suggestions.

  1. When I zoom-in, the top part of the card is going out of view. May be you can use min-height instead of height on body to prevent that
  2. h2:hover is working but h2:focus isn't working. I suggest you wrap h2 in <a> tag to access it with keyboard
  3. You shouldn't apply height to any container with text as it leads to overflow problem when you add more text
  4. Do not use px units for font-size as users can't increase font size in their browser. Use rem or em depending on the context
  5. There's an abrupt jump in size when the screen size reaches more than 390px. You might wanna make it a smooth transition
  6. To make it more responsive I suggest apply max-width to card only. Then everything in the card will adjust itself when you decrease screen width. You don't even need media query if you use clamp() to reduce font size

All the best. Happy coding :)

Marked as helpful

0

@anwar-elbarry

Posted

@py-code314 thank you very much ,i have realized many things now thanks to your help ,i truly appreciate your effort and support.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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