All comments

• 

  Candyflamey•40

  @Aymii-mhSubmitted 9 months ago

  

  front end practice project using html and css

  1

  20
  

  nachoNota•300

  @nachoNotaPosted 9 months ago

  hi, if you want to center the card, you could put this to the body:

  body{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }
  

  Marked as helpful

  0
• 

  Matthew Askilashvili•90

  @Mate-maxSubmitted 9 months ago

  

  Frontend Mentor | Social links profile

  1

  30
  

  nachoNota•300

  @nachoNotaPosted 9 months ago

  hi, if you want the card to be in the middle of the page, you can give the body this:

  body {
    display: flex;
    align-items: center; /*centers vertically*/
    justify-content: center;  /*centers horizontally*/
    min-height: 100vh;
  }
  

  Marked as helpful

  0
• 

  Prithwish Hati•60

  @Prithwish-HatiSubmitted 9 months ago

  

  Blog Preview Card - Box Shadow with Vanilla CSS

  1

  40
  

  nachoNota•300

  @nachoNotaPosted 9 months ago

  if you want to center the card, you should put this on the body:

  body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  you have to put a min-height in order to have the card centered

  0

  This comment has received 1 replyShow
• 

  Obiny•150

  @obinysolSubmitted 9 months ago

  I have enjoyed this project the most so far because I believe it best challenges my CSS and HTML skill levels.

  However, I have never come across SVGs in tutorials and my previous practice projects.

  In this project, I struggled with applying the z-index property to the background quotation marks, and I could hardly find an elaborate explanation online about SVGs, why they are important, and how to use them.

  I will be highly appreciative of any insight and online resources regarding the same. Thank you :-)

  

  Responsive testimonial page using grid template areas

  1

  70
  

  nachoNota•300

  @nachoNotaPosted 9 months ago

  what i did with the quotation marks was to put it as a background image, like this:

  .card-1{
      background: var(--Moderateviolet);
      background-image: url('images/bg-pattern-quotation.svg');
      background-repeat: no-repeat; /*so it appears only one time and doesn't repeat itself*/
      background-position: 80% 0; /*the left one is for positioning it horizontally, and the right one is vertically */
  }
  

  my .card-1 is basically your section with id="daniel".

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  bekkaianes•70

  @bekkaianesSubmitted 9 months ago

  

  challenge blog previw card

  1

  40
  

  nachoNota•300

  @nachoNotaPosted 9 months ago

  hi, if you want to put the container in the middle of the page you have to give the body a min-height, and also add justify-content: center, like this:

  body{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  or you can also use grid, like this:

  body{
      display: grid;
      place-items: center;
      min-height: 100vh;
  }
  

  Marked as helpful

  1