Four card feature section with css FLEXBOX AND GRID

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome job on this one. Layout in desktop looks fine, just the border on each card could be remove so that the box-shadow will be more visible, and the background-color as well for the body tag is not using the grey one like on the design. The mobile layout is great as well.

  For the center problem, what you could do is that, add a max-width on the p tag that have text, adjust it to your preference and it will wrap the text like on the design.

  Some other suggestions would be:

  • Both the text Reliable, efficient delivery and Powered by Technology could have used just one h1 since it looks like that it is just one phrase. You could just wrap the second text inside a div and wrapped it in another row.
  • The alt values for the icons that you used should be left empty alt="" since it is just a decorative image.
  • Just an idea, maybe you could make a 2x2 layout when transitioning to mobile layout. For example, the desktop layout have 3 colums for the cards right, and maybe resizing, you could make that 2x2 so that you don't just need to transition directly to mobile layout. Just an idea :>

  Aside from those, markup looks good.

  0