HTML and CSS

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted almost 4 years ago

  Hey, great work on this one. Layout in desktop seems fine, but the buttons are outside of the container in my screen. I am using 1366x768. Mobile layout seems fine, but 375 is too small for mobile breakpoint. The 375 on the design is not the intended breakpoint, it is just design.

  Some suggestions would be:

  • I suggest not styling the html element. Place those background properties on the body tag. Usually, the html element will only contain:

    html {
    box-sizing: # value stated;
    font-size: 100%;
  }
  

  • Instead of using height: 100vh on the body tag, use min-height: 100vh on it. Using height: 100vh will limit the elements size according to the viewport's height. So even if the element or the website have many element, if it uses height: 100vh it won't logically captures them. min-height: 100vh is much better because it takes 100vh as minimum and it will expand if it needs to.
  • Adding padding to the top and bottom of the body tag so that it prevents the content from touching the sides.
  • In a website, you typically add main element. This makes the structure better and it guides screen reader users where they are when navigating on your website. On this one, the .main-container selector could have been using main element.
  • The alt text on the img should have been left empty like alt="". When you think an image is just being used as a decoration, you should left the alt be empty. If you think the image adds to the context? Use a descriptive alt. Since the image on this one is just a vector decoration, using alt="" is better.
  • The img as well of the music icon should have been using alt="".
  • I would have wrap the annual-plan with a heading tag like h2.
  • Do not position: absolute the footer. Leave it on the flow.

  Other than those, great work. But changing the breakpoint will be really good. Also, if you like, starting some projects using mobile first layout:>

  12

  Marked as helpful