Responsive Blog Preview Blog Card

Community feedback

• 

  Sivaprasath•2,520

  @sivaprasath2004Posted 7 months ago

  Hello i`ll wishing for your completion project solution.

  • I will give some suggestion i believe its used for improve your skill.
  • In CSS You will use

      body{
      display: flex;
      flex-direction: column;
      background-color: var(--color-bg);
      /* max-width: 90rem; */
      /* min-height: 50rem; */
      /*padding-top: 13.65625rem;*/
      align-items: center;
    /*  margin: 0 auto; */
      font-family: var(--font-main);
  }
  

  • use this code

     body{
     display: flex;
     background-color: var(--color-bg);
     justify-content: center;
      font-family: var(--font-main);
      align-items: center;
      min-height: 100vh;
      padding: 0;
  }
  

  Marked as helpful

  0

  ---

  

  P

  Arnold Limberg•410

  @CreativeLogicPosted 7 months ago

  @sivaprasath2004

  Hi. Thank you for the suggestion. I am trying to make my implementation pixel perfect. The problem with min-height: 100vh and centering this way is that it centers based on browser window size, but the Figma design has a set height. What happens is that when I upload a solution using your way is that it isn't dead-center to the front-end mentor version because the browser window height can go past the set height.

  0