Begginer solution to 3-column preview card component.

Community feedback

• 

  Jefferson V. F.•330

  @JorggyhPosted about 2 years ago

  Have you noticed that when hovering over the buttons the height of the cards is increasing? this is because the buttons are missing a border, and when you hover the mouse you are adding a border, increasing the size.

  One way to fix this is to add border: solid 2px transparent; inside your a, or by setting a height for your container

  speaking of container, I consider it unnecessary for you to create a class for main, you can style main directly, for example, instead of doing:

  .container {
       display: flex;
       ...
  }
  

  you can do

  main {
       display: flex;
       ...
  }
  

  Apart from these details you did a good job, keep going 🚀

  Marked as helpful

  0

  ---

  

  Mario Alberto Carpegna•30

  @mcarpegnaPosted about 2 years ago

  @Jorggyh hi! I noticed the problem with the buttoms, an had no idea how to fix it. And I'll take the container/main advice. Ty!

  0
• 

  marianoz23•20

  @marianoz23Posted about 2 years ago

  Very good!! Congrats!!!

  Marked as helpful

  0

  ---

  

  Mario Alberto Carpegna•30

  @mcarpegnaPosted about 2 years ago

  @marianoz23 ty!

  0
• 

  Patrick•800

  @PPechmannPosted about 2 years ago

  Hi @mcarpegna, very nicely done on this challenge, congrats!

  You nailed it regarding the desktop size design.

  To further improve the solution, I recommend also adding media queries for smaller screen sizes, by just changing the flex-direction to column in this case.

  Great job again, keep going :)

  Patrick

  Marked as helpful

  0

  ---

  

  Mario Alberto Carpegna•30

  @mcarpegnaPosted about 2 years ago

  Hi @PPechmann. Had no idea about queries because I am starting in this as an autodidact. So I investigated and achieved this goal. Ty for your time, you was very helpfull!

  1