Responsible 3 Col Preview Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi @dhdbrud318, congrats on completing this challenge!

  Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

  To make your CSS code easier to work you can create a single class to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  mona Elshikh•510

  @MonaElshikhPosted about 2 years ago

  Hi there, Great work :)

  small comment , in buttons you need to make a transparent border and give it a color on hover to avoid the content movement when user hover on buttons. So you need to add
  border: solid 1px transparent inside your button

  hope this is helpfull :)

  Marked as helpful

  0
• 

  Jefferson V. F.•330

  @JorggyhPosted about 2 years ago

  Hey, well done!

  A tip, the ideal is that the design looks good on any screen size, you added the media query at 412px, but with 413px it doesn't fit the horizontal design, test it, open your project in the browser, click inspect the page, view on mobile, and view at 425px for example, I would recommend changing to 1024px, or 768px if you adjust the font sizes.

  Another thing, 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 of the container.

  One way to fix this is to add border: solid 1px transparent; inside your button { }, or by setting a height for your container.

  Marked as helpful

  0