Responsive Four Card Feature Section using CSS Grid

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted 6 months ago

  I can spot some problems in this:

  • the alt needs to be empty on the icons because they are decorative
  • the mobile styles should really be the default styles. There's no need to define row heights in any screen size. It's actually very important to NOT limit the heights like that.
  • the grid only needs a max width in rem not a width.
  • the media query should be defined in rem or em not px so that the layout adjusts nicely for all users including those who have a different text size setting in their browser or device.

  11

  Marked as helpful
• 

  Adam•340

  @nadam-design

  Posted 6 months ago

  Hi M Rafay!

  A few things to consider:

  • Grid columns: grid-template-columns: 415px 415px 415px; could be optimized, don't use px, instead use fr which is much more flexible. Use the repeat() if you have equal width columns: grid-template-columns: repeat(3, 1fr);
  • Grid rows: as Grace mentioned above no need to set the row heights. If you don't declare it's going to be auto, which means it's depends on content. You can use: grid-template-rows: repeat(2, 1fr); which means you only need two rows in this case.
  • As a frontend builder, your task is to faithfully follow the design plan in every detail: spacing, fonts, sizes, and colors. Strive for perfection, as this is a key expectation in this field. For example, in your solution, the colors were swapped. While this might seem like a small issue, it reflects a lack of attention to detail. Developing an eye for aesthetics takes a lot of practice, but it's essential if you want to improve and excel in this area.
  • Responsiveness: You’re currently using two layouts, mobile and desktop. While the task only specifies these two, it’s worth considering adding a third, tablet version (e.g., two columns, two rows) to create a more fluid experience.
  • There are still some discrepancies, such as the box shadows and widths. If I’m correct, you worked from a .jpg, which can make things more challenging. In this case, open the design in an image editor and measure everything precisely. It’s a meticulous process and requires more time and effort, but it will help you develop a mindset that pays closer attention to details.

  I believe you’ve got the basics down, but there’s still room for improvement in many areas. I’m confident you’ll get there! Keep it up!

  00