Notification page with flex and js

Community feedback

• 

  Philip Droubi•575

  @Philip-DroubiPosted over 1 year ago

  Congratulation on completing this challenge.

  Here are some tips you can do to improve your solution.

  First for the page body it's better to add this code.

  body {
      font-family: "Plus Jakarta Sans", sans-serif;
      background-color: hsl(210, 60%, 98%);
      font-size: 16px;
      color: hsl(219, 12%, 42%);
      min-height: 100vh; /* To take the full page height on all screens*/
      display: flex;     /* To center the main element */
      align-items: center;
      justify-content: center;
  }
  

  For main or .container you need to delete the margin margin: 80px auto; also delete it from the 600px media query margin: 20px auto;

  Now for the .wrapper I think by doing this it will look better :

  .wrapper {
      background-color: white;
      padding: 40px 30px 0;
      margin: 0 auto;
      max-width: 800px;       /*So that the element does not appear too wide on the screen */
      width: 92%;             /*To fit small screens*/
      max-height: 90vh;       /* To be shorter than the height of the screen */ 
      overflow-y: scroll;     /* To show all elements in the wrapper */ 
      border-radius: 15px;
      box-shadow: 0px 0px 26px -13px rgba(0, 0, 0, 0.26);
  }
  

  Also delete margin: 10px; from .wrapper 600px media query.

  If you don't like the default scrollbar, I recommend this :

  .wrapper::-webkit-scrollbar {
      width: 8px;
      background: lightgray;
      border-radius: 10px;
  }
  
  .wrapper::-webkit-scrollbar-thumb {
      background: gray;
      border-radius: 8px;
  }
  

  Hope this helps you :)

  Marked as helpful

  0

  ---

  

  Eric Jan Estiva•230

  @oceanotrashPosted over 1 year ago

  Thanks @Philip-Droubi everything now looks better in all screen sizes :D

  0