Skip to content
Submitted 8 months ago

Responsive blog preview card uesing grid and flexbox

MelAnnaCode•20
@MelAnnaCode
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm glad the blog cart came out very similar to the design and doesn't jitter when changing the window size.

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

The most difficult part was catching the right proportions, such as the size of the images, the width of the spacing between each element.

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

Any suggestions on how I can improve are welcome!

Community feedback

  • Liam Jackson•60
    @ljjacksonPosted 8 months ago

    Nice work on this, on the desktop side of it you've definitely got a really good understanding of the implementation, it looks and interacts with how the design was intended. (I'm primarily a backend developer, so there may be other developers on this platform who could give you better feedback.)

    The only negative I have is the responsive design,

    
@media only screen and (max-width: 375px) {
  html {
    font-size: 45%;
  }
}

    When using devices such as the Samsung S8+ or the iPhone SE, the font-size: 45%; makes the content really hard to read, I think you could get away with removing this completely.

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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