Article Preview Component

Community feedback

• 

  Md5 dalton•1,430

  @md5daltonPosted about 2 years ago

  Hello Neil 👋

  To center the card perfect in the page use flex box:

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
    /* padding-top: 20rem; */
  }
  

  If you want to make your site responsive, I'd suggest you to go with mobile first approach which means all default styles are for mobile and then define media queries for bigger screen devices. I'll demonstrate:

  .article-container {
     min-width: 300px;
     max-width: 730px;
  }
  
  /* Large Devices */
  @madia (min-width: 768px) {
      .article-container {
         display: flex;
         align-items: center;
      }
  }
  

  This way you only have to define the flex box for larger screen devices. Also add some side padding on body to make sure the card doesn't flush against viewport edges. padding: 0 1rem; as an example. 👌

  0
• 

  Abdalla Rahmah•260

  @AbdallaRahmahPosted about 2 years ago

  nice work Nell, i like your work and i have some ideas for you:

  • instead of adding a large padding to the body element you can add min-height: 100vh and justify content: center this will help you center the main element.

  • also you can remove the article-container div and duplicate its styles to the main tag.

  best of luck for you.

  0