Responsive Article Preview Component Using Vue.js & SASS

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Osman, great work here, first of all! I think for the bigger screen sizes, it's fine as long as the component is visible. The main thing I'd fix here is to center the component properly and not using percentage margins. What I'd do is this:

  body {
     background-color: #ecf2f8;
     min-height: 100vh; 
     display: flex;
     align-items: center;
     justify-content: center;
  }
  
  .container {
     width: min(100%, 60em);
     margin: 1rem;
     // rest of your code. 
  }
  
  

  Using width: min(100%, 60em) helps to set a limit of 60em for the container, and this way, the component won't be stretched out from side to side!

  0