3 column preview card

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Adriel Murray, Congratulations on completing this challenge!

  Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:

  1.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.

  2.You’ve used <div> to wrap the card container, in this case you need to use <main> since this is the main block of this page.

  3.Every page needs a main heading, the <h1> to show which is the most important heading. You need to increase the headings by one level, like h1, h2, h3 to show the titles hierarchy. Remember that you cannot have more than one h1 heading.

  4.The component html structure its fine, something you can do to improve the html markup its to replace some divs, note that you build all the structure using div blocks and these don’t have an particular meaning, for this reason its better you use meaningful tags like <article> in this example, for the cards replacing the divs, this way you have a tag that describes what it's inside the this html block.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi,

  Nice job on the challenge, add the below will the issue.

  .container button {
      border: 3px solid white;
      cursor: pointer;
  }
  

  Because you were adding a border on hover it increased the height of the columns.

  Marked as helpful

  0
• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Adriel, about your question, the main issue is the border of the button; without hovering, the button has a border:none, and when they are hovered over, they have a border-style: solid, but since the width is not specified, there probably is just the default browser width used.

  To fix this, you can try using the shorthand border property for the button and its hover style, and also, you can use background-color: transparent for the hover background so that you don't need to write each button's background color:

  button {
     border: solid transparent 2px;  // you can also try each button's background color instead of transparent
  }
  
  button: hover {
      background-color: transparent; 
      color: white;
      border: solid white 2px;
  }
  

  In this way, when the button and its hover style has the same border width, the container will stay the same height. If only the hover style has the height, the container needs to "grow" the extra width and thus appear to shift slightly.

  Hope this helps you out!

  Marked as helpful

  0