3-column-preview-card-component-main

Community feedback

• 

  P

  Andreas Remdt•950

  @andreasremdtPosted about 2 years ago

  Hey @RayAsh37,

  Congrats on solving this challenge! I'd love to see how you tackle the responsive part :-) Your solution looks really good, here are a couple of layout tips I can give you:

  • Try using the correct web font. You used Roboto Condensed, but the challenge uses other font families. This would make the design match even closer.
  • I love that you used mix-blend-mode on the buttons and didn't hard-code the color for each button individually.
  • You used margin-top: 5rem to push the buttons down. However, this can look weird if the text doesn't have the same length across all three cards. You can observe this issue by resizing your browser's viewport, once you reach smaller screen sizes the buttons won't be aligned horizontally anymore. To fix this, utilize flexbox. On your cards .sub-card, apply display: flex; flex-direction: column; align-items: start;. Then, on the buttons, replace margin-top: 5rem with margin-top: auto. This will push the buttons to the very bottom, no matter how big your screen is.
  • You could use article elements instead of div elements for the cards, to make them more semantic.

  Hope this feedback helps, let me know if you have any questions :-)

  Marked as helpful

  0
• 

  Kostya Farber 🧟‍♂️•220

  @kostyafarberPosted about 2 years ago

  Hey there!

  Really great solution. I like how clean and organised your css is.

  Just a couple of suggestions:

  • I would suggest perhaps using a css reset and importing it into your css. It will speed up your development and remove some annoying default settings. look here for more info.
  • To get the design looking even more pixel perfect you could reduce the line-height on the card content.

  Overall really good stuff.

  Thanks, happy coding!

  if you find my feedback helpful, please mark it as helpful. Thanks :)

  Marked as helpful

  0