Card in CSS (First challenge ever)

Community feedback

• 

  salem moqa•240

  @moqasalemPosted almost 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 .

  0

  ---

  

  MSA-new•30

  @MSA-newPosted almost 3 years ago

  @moqasalem Hi Thank you for your answer

  .direct-parent-to-content {
     display: flex;    /* When I used this the image was gone :-( */
     justify-content: center;
     align-content: center
  }
  

  Where should I use it ?

  0

  

  salem moqa•240

  @moqasalemPosted almost 3 years ago

  @MSA-new it depends on your classes and how many columns or rows you wanna use Take look to me solution and open the style code to see the Flex components https://www.frontendmentor.io/solutions/nft-preview-card-component-with-html-and-css-vnXq65DVb

  0
• 

  Coder Suresh•870

  @coderSureshPosted almost 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.

  0

  ---

  

  MSA-new•30

  @MSA-newPosted almost 3 years ago

  @coderSuresh Hi Thank you for your answer.. I did try to center it using CSS FlexBox but it didn't work,, Here is what I've tried:

  .content {
    display: flex;
    justify-content: center;
    align-items: center
  }
  

  I tried it on the direct parent of the content. Thank you

  0