3-column preview card component

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted about 1 year ago

  Hi, @Alokray007. That's a good solution. Keep coding. Here are some quick tips.

  1 - Everything in your code looks normal. Maybe you can use this ruleset to center your content in the body instead of flex:

  display: grid;
  place-content: center;
  

  You can omit height: 100vh; or height: 200vh; because your content is high this default value (for mobile) and it makes some strange behavior.

  2 - You can add some margin values to your .cards class to make it easier to work with:

  .cards {
   margin: 88px auto;
  }
  

  3 - You can use this ruleset to set the button element to the default style:

  button {
      /* Button Style Reset */
      
      /* LAYOUT */
      /* Padding */
      padding: 0;
      /* TEXT */
      font: inherit;
      /* APPEARANCE */
      border: none;
      color: inherit;
      background-color: transparent;
      cursor: pointer;
  }
  

  However, you should add the type="button" attribute to your buttons in HTML to enable these styles, like this:

  <button type="button" class="your-class">Learn More</button>
  

  I hope these will help you. Keep coding and have a wonderful day.

  0