Fylo dark theme landing page with html and css only

Community feedback

• 

  Favourite Jome•1,110

  @jomefavourite

  Posted about 4 years ago

  Great job, I like the work and here are my feedbacks

  • Making use of the % unit to determine the overall width, using margin and padding of each section, without including max-width property will make the layout to keep growing on large screens.

  • Adding a max-width property to the texts on the page will be very helpful, so as to stop the texts from growing at a certain point.

  • The model with the selector .access, I noticed it isn't always centered so I made some changes.

  .access {
      padding: 5% 5%;
      box-shadow: 3px 3px hsl(0deg 0% 5%);
      height: auto;
      width: 80%;
      max-width: 700px;
      /* margin: -10% 21%; */
      background-color: hsl(217, 28%, 15%);
      position: absolute;
      margin-top: -110px;
      left: 50%;
      transform: translateX(-50%);
  }
  

  Also on the media query

  @media (min-width: 320px) and (max-width: 500px)
  .access {
      /* margin: -2% 5%; */
      padding: 1.5rem;
      width: 90%;
  }
  

  Lastly, I'll like to talk about the percentage unit you used frequently on margin and padding, it might cause issues as the viewport increases so I'll advise you make use of other responsive units like em, rem.

  Then on the width of each sections, you can use percentages. Well, it varies and depends on the use case.

  Here's an article I wrote that might be helpful.

  Also, I'll strongly advise you take this course Conquering Responsive Layouts by Kevin Powell.

  12