Responsive four card landing page using CSS Grid

Community feedback

• 

  Folarin Akinloye•1,240

  @folathecoderPosted over 3 years ago

  Hi Antonio!

  For responsive breakpoints, I normally use bootstrap's standard breakpoints. I basically use it as a reference (to at least know where to start from) and I go ahead to adjust it based on my design.

  Note that, breakpoints don't have to be fixed, you need to adjust it based on what you are building. So it can fall within a range.

  Here are Bootstrap breakpoints:

  https://getbootstrap.com/docs/5.0/layout/breakpoints/

  2

  ---

  

  Folarin Akinloye•1,240

  @folathecoderPosted over 3 years ago

  I will drop a feedback on your challenge when I get to my computer. 😊

  1

  

  Antonio TS•60

  @antoniotullyspinozziPosted over 3 years ago

  @folathecoder appreciate the input, will take a gander at the shared link. Thank you.

  0
• 

  Fraser Watt•1,790

  @fraserwatPosted over 3 years ago

  This is really good! I like how you've worked the title into the grid area.

  I'd make use of the max-width to make sure your feature cards don't stretch out too much, also you can get rid of the top margin in your .header element on the smaller media query (probably a bit too far down the page, its fine on the other screen widths).

  Otherwise that's sorted I reckon!

  1

  ---

  

  Antonio TS•60

  @antoniotullyspinozziPosted over 3 years ago

  @fraserwat thank you for contributing constructive feedback. I've updated and tweaked as necessary. The only nitpick I currently have that I am struggling with is making it look nice on an iPad Pro as well as a web browser. I find that where one setting will suit one, it then conflicts with the other and because you're dealing with similar dimensions it becomes tricky as to know what to do.

  0