Results Summary Component Using CSS Flexbox

Community feedback

• 

  Hugo Sanchez•270

  @HunigoleSanPosted 10 months ago

  Hello @aykinsancakli ! 👋 You've done a great job, very similar to the challenge. Let me give you a tip that could help you improve your CSS logic a bit. 🛠️ You'll notice in the following line of code:

  .btn:hover { background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%)); }

  I've noticed that you use the hover pseudo-class very effectively, which is perfect for PC devices. However, remember that on mobile devices, this can cause issues as it behaves like a fixed mode. 📱 In that case, I recommend deactivating the hover for mobile devices and using active instead. 🔍

  @media (width < 375px) { .btn:hover { background: none; /* You can set the desired background for the button in normal state */ }

          /* Mobile styles */
          .btn:active {
              background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
          }
      }
  

  You can use this method or any other method that seems more suitable to you, the important thing is to learn a bit about those details that we must consider. 🛠️📘

  Marked as helpful

  0

  ---

  

  Aykın Sancaklı•680

  @aykinsancakliPosted 10 months ago

  @HunigoleSan Thank you very much for the small but also important tip.

  0