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

3 Column preview, CSS Grid

nicolasdsa 125

@nicolasdsa

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, any feedback is welcome. Thanks to pikamart for helping me with my previous solution problems.

Community feedback

@pikapikamart

Posted

Hey, great to see you again!! Also, you're very much welcome :>

The layout is good in desktop and mobile state. Though an issue arises when resizing.

  • When resizing, your contents gets squished in the middle and they get very narrow which is not really Ideal. It will be really good if you make another breakpoint where/when the layout is starting to look different or destroyed. Creating this will also help the problem of appearance of scrollbar at the bottom which we always avoid.

  • On the markup, I suggest that you only use one h1 per page. Though it can be used, it will be really good if you do use only 1. It can cause problems for users who uses screen readers. You can use other heading tags. On this challenge, you can use h1 especially if it is sr only or for screen readers only.

Overall, you did a good work and really glad that you don't used height: 100vh which I see a lot on this challenge. If need more help, just drop it here okay^^

1

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