Four card feature section

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Gabriela-hub-89, Congratulations on completing this challenge!

  I’ve few suggestions for you that you can consider adding to your code:

  The box-shadow is a bit too strong, this is due the opacity and blur. The secret to create a perfect and smooth shadow is to have low values for opacity and increase blur try this value instead: box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%);

  If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Edufelibugm•450

  @edufelibugmPosted about 2 years ago

  Hi @Gabriela-hub-89 !!! 😄 Your design looks good, but not it's responsive for mobile resolutions. 📱📱

  It's very easy adjust that, only add @media (max-width: /* resolution where it looks wrong */) { /*your CSS code*/ } , then add the atribute display: flex; flex-direction: column; in your class "cards". 🤖

  And that's it, you already have your design for mobile!!! 🥳 🥳 🥳

  Have a great day and happy coding 💛

  Marked as helpful

  0
• 

  P

  Justin Green•2,770

  @jgreen721Posted about 2 years ago

  Only suggestion would be to make it responsive to mobile. You can do that pretty easily with CSS @media query and you can adjust your grid to single column rows at a particular screen width.

  Something like @media screen and (max-width:450px){ // your CSS code here}. Make sure there is the white space between and and the open (. I've tripped over that gotcha more than once.

  Nice job on the challenge though. Looks great on the regular size screen!

  Marked as helpful

  0

  ---

  

  Gabriela•60

  @Gabriela-hub-89Posted about 2 years ago

  @jgreen721 Thanks! I knew I was forgetting to do something.

  0