Card in CSS (First challenge ever)

Community feedback

• 

  salem moqa•240

  @moqasalem

  Posted over 3 years ago

  Hello MSA-new welcome to frontendmentor

  I think the problems 1,2,3,5 which you are facing can be solved with "flex" element like this:

  .class-name{ display: flex; flex-direction: ... ; justify-content: ... ; align-items: .... ; }

  for problem 4 you can give border-bottom to your class to make line below it .

  02
• 

  Coder Suresh•870

  @coderSuresh

  Posted over 3 years ago

  Hey there, I hope this answer will be helpful for you.

  First of all, there are different ways to center things in CSS. You can use a table, you can use the grid as well as a flexbox, and a position too.

  Among them, I love to center things using CSS FlexBox because I know how to use it. You can try any of the methods and use whichever you like.

  The block of code for CSS FlexBox is:

  div {
          display: flex;
          align-items: center;  /*centers div vertically*/
          justify-content: center; /*centers div horizontally*/
       }
  

  You can see this detailed guide for CSS flexbox.

  Now, to change the color of the horizontal line (while using <hr> tag), you can remove its border, give it the desired height, and change its background color. Below is the code:

  hr {
          border: none;
          height: 1px;
          background-color: purple;
      }
  

  Sorry, I didn't understand your last question. Feel free to ask any question, I am always ready to help you.

  01