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

I used Flexbox for layout and media queries for respons

mikiyasda 20

@mikiyasda

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Ana 40

@Ana000701

Posted

Style Modification Suggestions:

Generally, at a width of 375px, the card should maintain a little distance (24px) from the edges of the mobile screen, rather than completely filling the screen. It is recommended to use @media along with margin to modify the .blog-card style.

Instead of directly using width to switch the card width for different layouts, I prefer to use max-width for smoother width transitions. This approach can also eliminate the need for the following code: @media only screen and (max-width: 500px) { .blog-card { width: 327px; }}

Carefully observe the design mockup; the font has been adjusted between 375px and 1440px. You can refer to the parameters provided in Figma and use @media for responsive web design adjustments.

Other GitHub Suggestions: Although this is just a practice project, consider modifying the README content to make it easier for those providing feedback to find your live URL.

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