Fist solution, media querys , grid and flexbox

Community feedback

• 

  P

  Carl•1,135

  @CarlHummPosted 3 months ago

  Hi isaias

  Good job on the solution. I like how you decided to add the various different layouts at each breakpoint instead of just the mobile and desktop, very nice.

  Some design suggestions

  h2.card-header-name {
  font-size: 1rem;
  line-height: 1;
  }
  
  .card-header-info {
  gap: 0; <-- Can be removed
  }
  

  Instead of using gap to seperate the author name from the role, you can adjust a native property called line-height as shown by h2.card-header-name. As you've already removed margins and still need less space, this should help with that.

  You could also create some further balance by reducing the font size of the author name so that the quote stands out more. Anything < 1rem (16px) and > 0.6875rem (11px) should be ok. Currently it's using the default user agent stylesheet size of 1.5em.

  Spacing changes

  .card {
  gap: 1.5rem;
  justify-content: space-between; <-- Can be removed
  }
  

  Consider swapping out your space-between declaration on your cards for a gap instead. As you can see this spacing varies depending on how much content a card contains, which is influenced by how narrow it is. The card on the right has virtually no space compared to the others because of this. Gap allows you to add that space and factor it into the flexbox calculations.

  Helpful box shadow

  box-shadow: 40px 60px 50px -47px rgba(72,85,106,.247)
  

  Overall good solution, feel free to correct me and I wish you luck on your future challenges!

  1