Responsive 3 column preview card

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like you declared each background color for each button which needs to be change the background color during the hover, actually we can handle that issue with a css color function named rgba()

  ---

  • The rgba() function define colors using the Red-green-blue-alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel, which helps us to take control over the opacity of the color.

  ---

  • So just add rgba(0,0,0,0) for the button elements during hover

  ---

  • Let's look an example

  button:hover {
  background-color: rgba(0,0,0,0);
  color: white;
  outline: 1px solid white;
  }
  

  ---

  • Now you can remove these individual declarations for the background for each button element

  .btn-1:hover {
  background-color: hsl(31, 77%, 52%);
  border: solid hsl(0, 0%, 95%);
  color: hsl(0, 0%, 95%);
  }
  .btn-2:hover {
  background-color: hsl(184, 100%, 22%);
  border: solid hsl(0, 0%, 95%);
  color: hsl(0, 0%, 95%);
  }
  .btn-3:hover {
  background-color: hsl(179, 100%, 13%);
  border: solid hsl(0, 0%, 95%);
  color: hsl(0, 0%, 95%);
  }
  

  ---

  • Now you have gotten the desired result without hassling in an efficient way.

  ---

  • Pro tip: you can use transparent value for background property to get the same effect as rgba(0,0,0,0) but using rgba provides more granular control over the color correction.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  Milla65327•50

  @Milla65327Posted over 1 year ago

  Thnak you so much! I didn't know that, so now I will keep that in mind @0xAbdulKhalid

  0
• 

  Aaron Ramirez•140

  @davuboyPosted over 1 year ago

  Hi!! Congratulations for finish this challenge. My advice is you need to take more carefully the tablet design (768px) breaks the body a little bit. For this cases try to put an universal selector with this params:

  *{ box-sizing: border-box; margin: 0; padding: 0; };

  One more time, congrats!! you have an amazing way to resolve the challenge. Hope you will helpful my advice.

  Greetings,

  Marked as helpful

  0

  ---

  

  Milla65327•50

  @Milla65327Posted over 1 year ago

  Thank you, I will check that out, I didn't pay much attention to the tablet designs indeed, thank you :) @davuboy

  0