Design comparison
Reports
id attribute value must be unique
<p class="card-description" id="card-description">Monitors activity to identify project roadblocks</p>C Lewis’s questions for the community
This is my first Frontend Mentor PRO challenge with access to the Figma files. I worked HARD on precision and a responsive design using CSS grid and the least amount of code. I'm having some sizing issues and difficulties? I have specific pixel sizing both on grid columns and rows and the grid elements and I don't think that is necessary. The design works but I'm wondering about best practices and less clunky code. You can see specific examples in my repository. I also changed up the design a bit to enhance accessibility via contrast ratios and to create more visual interest.
Community feedback
Hey @casserole27, Great job on this challenge!
You can do the following to reduce the amount code needed and make your content fully responsive.
-
Change the
widthandheightof each card tomax-widthandmin-height. This make each card responsive. Remove all the otherwidthsfor the card components, you only the ones mentioned above. -
You can remove the grid styling in each card, since by default, text is already aligned to the left and in a column. All you will need to do is use position absolute to position the icons (give all the icons the same class)
-
Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout; it will give you full control of the layout.
Some other suggestion:
-
The headline-wrapper should be a Header Element. Since this the introductory part.
-
The Main Element should only wrap the card components since this the area you want you users to focus on.
If anything is confusing or giving you a hard time, let me know.
Happy Coding! 👻🎃
Marked as helpful
Please log in to post a comment
Log in with GitHub
Join our Slack community
Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!