Responsive Four Card Feature Section - Mobile First Workflow

Community feedback

• 

  hitmorecode•7,240

  @hitmorecodePosted 5 months ago

  Nice well done. One thing that you can fix. The borders on top are bending with the border radius of the cards. Change this in your CSS to fix this.

  .flexchild {
    background-color: var(--White);
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    text-align: left;
    padding: var(--fs-17);
    /* add these two lines  */
    position: relative;
    overflow: hidden;
  }
  
  .flexchild::before {
  /*   border-top: 5px solid var(--Cyan); */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    width: 100%;
  }
  
  .cyan::before {
  /*   border-top: 5px solid var(--Cyan); */
    background-color: cyan;
  }
  
  .red::before {
  /*   border-top: 5px solid var(--Red); */
    background-color: red;
  }
  
  .orange::before {
  /*   border-top: 5px solid var(--Orange); */
    background-color: orange;
  }
  
  .blue::before {
  /*   border-top: 5px solid var(--Blue); */
    background-color: blue;
  }
  
  

  I hope you find this helpful. Keep it up 👌👍

  Marked as helpful

  0

  ---

  

  Wisdom•230

  @UnifiesPosted 5 months ago

  Hi @hitmorecode,

  I did find it helpful, thank you so much for the helpful feedback!

  0
• 

  P

  Richard•410

  @Richard1876Posted 5 months ago

  k

  0