different four card layout using grid

Community feedback

• 

  Holo Olagoke•50

  @Olarra18Posted over 1 year ago

  @siva-krish45 I think it's because you did not add value to x and y offset of the box shadow that is the reason you did not get the result you expected.

  .wrapper .content .card{
  width: 20.5rem;
  height: 15.5rem;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: 0 0 2px #000000;  /*the value of x and y offset is 0 which means no box shadow*/
  }
  

  According to your CSS code you did not set value for the shadow box (x and y offset)

  You can read the MDN documentary on box-shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow. You can use this below code and adjust appropriately

  /* offset-x | offset-y | blur-radius | color */
  box-shadow: 10px 5px 4px black;
  

  the 10px which is the offset-x mean right hand side shadow

  the 5px which is the offset-y mean bottom shadow

  the 4px which is the blur-radius mean how blur or glow you want the shadow to look like

  while the black mean the color of the shadow.

  I hope this could be of a help, Happy Coding

  Marked as helpful

  0