Responsive time tracking dashboard using by CSS JS BOOTSTRAP SCSS

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Swam Htet, I know what you mean about the colors sticking out at the bottom; it's because the colored background of the card is right behind the div container with the number display, and the color will show if they both have the same border radius. What I did was, I just changed the two bottom corners' border radius slightly on the colored div so that it's a bit rounder and and then hide under the number display div, like this:

  // colored div
  .card {
    border-radius: 1rem 1rem 1.1rem 1.1rem;
  }
  // statistics div
  .card-stats {
    border-radius: 1rem;
  } 
  

  Hope this gives you some ideas on what to do!

  Marked as helpful

  1
• 

  Rodrigo Molina•250

  @s0alkenPosted over 2 years ago

  Hi Swam, congratulations on your solution, you did really good. I also had this issue and I solved it by applying a linear gradient to the background in order to make it transparent from middle to bottom, like this: linear-gradient(180deg, hsl(43, 84%, 65%), hsl(43, 84%, 65%), transparent 50%, transparent 100%).

  Also, take a look at the accessibility issues, your solution has 8, but I think you can correct them all by wrapping all the code inside the body in a main tag.

  I hope it helps!

  Marked as helpful

  1

  ---

  

  Swam Htet Paing•160

  @Swam1234Posted over 2 years ago

  @s0alken I really appreciate it.Thank you for your solution.

  0