3-column preview card component with HTML CSS FLEXBOX

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @rain-riot, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code: Your solution seems fine, you did a really good job wrapping the content for these 3 cards. Something you can improve here is to use 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.

  Don’t use id to give the style of your elements, it's not a good idea because id is a too specific selector used for forms and Javascript code. Instead, use class for styling and let the id for much specific stuff. It's also not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Rain-Riot•50

  @rain-riotPosted about 2 years ago

  @correlucas always great advice, thanks sire!

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hello Rain, You have done a good work! 😁

  Some little tips to improve your code:

  • Tip of graphic design: with font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading)... for the designer it's a really awful font! I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.
  • instead of using px use relative units of measurement like rem -> read here

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  Marked as helpful

  0

  ---

  

  Rain-Riot•50

  @rain-riotPosted about 2 years ago

  @denielden thanks for the feedback! I'll do it, cheers🤝

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  @rain-riot you are welcome and keep it up :)

  1
• 

  Nneoma Njoku•1,210

  @SatellitePeacePosted about 2 years ago

  @rain-riot nice work but here are some problems with your card and some tips on how to solve them

  Your cards are not showing fully in fact on smaller screens i could only see two cards to fix this try this

  body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: hsl(0, 0%, 95%);
  }
  
  ````
  so instead of adding a fixed height of 100vh, your min-height should be 100vh in this way your card will not be below 100vh and if need be it will grow more than 100vh thereby allowing users to view the entire content
  
  
  - second on smaller screens when the cards become a single column they are packed together because you did not give them a margin so add a margin-bottom to your cards on a smaller screen alternatively you can use the flex gap property so
  
  ````
  .card{
  gap: 1rem;
  margin-bottom : 2rem;
  }
  
  

  • Lastly on hover the text of your button disappears and is only visible when the button text itself hovered. This makes for a bad user experience so do not separate the link hover from the button hover try this instead

  #column3 button:hover {
    background-color: hsl(179, 100%, 13%);
  color: #fff;
    border: 2px solid hsl(0, 0%, 95%);
    transition: ease-in-out 0.3s;
  }
  

  • lastly do not put links in a button you either use a link or a button, not both so remove the link from the button and place the text directly in the button. In this way, you will not have to target the button and its contents separately like you did example

      <button><a href="#">Learn More</a></button>`
  
  - this should be
  
      <button>Learn More</button>
  ````
  
  I hope this helps
  

  Marked as helpful

  0

  ---

  

  Rain-Riot•50

  @rain-riotPosted about 2 years ago

  @SatellitePeace hi, thanks for the feedback! I'll fix the code as you say🤝

  1