Four card feature section using HTML and CSS

Community feedback

• 

  Ovidiu-Antonio•3,125

  @ovidiuantonioPosted over 4 years ago

  Hello, your solution is very nice! Good job! It's very responsive and it looks nice on most of the phones.

  One small problem that you can easily fix is replacing the max-width: 375px media query width a 600px one, to make it look perfect for even bigger phones.

  I like to use these breakpoints when I make a website:

  • 1200px+ (large screens)
  • 900px-1200px (tablet landscape)
  • 600px-900px (tablet portrait)
  • 0-600px (phones)

  Happy coding! Keep going!

  Marked as helpful

  3

  ---

  

  micky•400

  @awwmickyPosted over 4 years ago

  @ovidiuantonio, That is a useful tip, to have certain breakpoints! How to you setup your CSS & media query normally? Do you go from mobile to desktop or vice versa?

  1

  

  Ovidiu-Antonio•3,125

  @ovidiuantonioPosted over 4 years ago

  @awwmicky I like to do desktop first. When I finish the desktop version I resize the screen width (width dev tools mobile view) and I test for those breakpoints

  2

  

  Adnan Niaz•90

  @sanixstudioPosted over 4 years ago

  @ovidiuantonio Thanks for your kind reply and those points to enhance the responsive design. I am definitely applying those changes.

  1
• 

  micky•400

  @awwmickyPosted over 4 years ago

  I like the details you added, blue tints for each card's box-shadow!

  1