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

Bento Grid

@Pichikachandu

Desktop design screenshot for the Bento grid coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@DebabrataBanik

Posted

Great work on the design! You might want to consider adjusting the font-size for the card elements as the font sizes changes across different viewports. You can try a few methods to scale the text as the screen size increases:

  • Media Queries: You can use media queries to define different font-size values for various screen widths.
  • Fluid Typography: Try using viewport width units (vw) for fluid scaling, so the text adjusts automatically as the viewport changes.
  • CSS clamp() Function: This modern method lets you set a minimum, preferred, and maximum font-size, offering more control over how text scales.

Hope this helps!

Marked as helpful

0

@Pichikachandu

Posted

Sure @DebabrataBanik thank you

0
T
Grace 30,730

@grace-snow

Posted

Hi, I recommend you check all the font families / typographic styles including line height. This looks quite different to the original design at the moment.

0

@Pichikachandu

Posted

Okay @grace-snow thank you

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