Advice generator with SCSS

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  I can tell you have a very polished design but if you want more responsiveness I would recommend it:

  • Change the h2 to h1 as it is necessary to have a h1 and only one per page but there is not in your project, so making this change will eliminate all accessibility errors in your project.
  • Remove all padding from the .main class and add the align-items: center attribute.
  • Also to the class .advice I would remove the height so that when there is little text there is not too much space and I would add the attribute padding-bottom: 7em so that the button has more separation with the pattern. In addition that in mobile I would change this way:

  @media screen and (max-width: 414px)
  .advice {
    width: 34.3rem;
    padding: 4rem 2.4rem;
    border-radius: 1rem;
    padding-bottom: 6rem;
  }
  

  I hope my comments are helpful.

  Good Coding!

  0

  ---

  

  Victor•1,035

  @CodeVeePosted over 2 years ago

  @Sdann26

  Based on the design, the vertical space are uneven. switching to using align-items would require adjustment of the markup for the button

  0