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

Blog Preview Card

Tomek 30

@PunyHuman666

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

geektim 230

@geektim

Posted

Hi, Tomek! An awesome job done. However, do consider the following: you set the max-width: 400px; and max-height: 600px;. But if you consider smaller screen sizes like the fold phones and the iPhone SE, the card will overflow and cause the scroll bar to appear. My suggestion is this, set width in percentage, for example width: 90%; and then max-width: 400px. This will make it so that when the screen size is smaller than 400px, the card will adjust to become 90% of the screen size. Then for the height, just make it height: auto; this is because when you have a project that has word counts exceeding the height, it will overflow. I hope you find this helpful.

Marked as helpful

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