3-column-preview-card-component

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello Enochlee, congratulations for your solution!

  Your solution is pretty good, this case is the same case of the other challenge you've done, the design is all setup, but isn't responsive yet. You've to fix the width inside the div col-1, col-2, col-3.

  main .row .col {
      max-width: 328px;
      height: 444px;
      padding: 45px 50px;
      color: var(--color-p-text);
  }
  
  .col-1, col-2, col-3 {
  max-width: 328px;}
  

  Fixing that you'll note that the cards will contract and manage the text.

  Enochlee, see if these changes work and then write me. I hope it helps.

  00

  Marked as helpful
• 

  Fatlind Shehu•2,230

  @fatlindshehu

  Posted almost 3 years ago

  Hi @iamenochlee,

  Nice job with the component, your component looks good and its responsive, I would bring up an issue I've found:

  • The button size gets bigger on hover for 2px because the border is added outside of the button, I would recommend setting the border from the inside like this:

  button {
     border: 0.125rem solid transparent;
     cursor: pointer;
  button:hover {
        background: transparent;
        border-color: var(--white);
        color: var(--white);
  }
  

  • Using a pre-processor like SASS or LESS would be also very nice, for bigger projects, pre-processors make the code reusability and maintenance very easy and also reading your code from other developers is much easier.

  02

  Marked as helpful