Contact Form using HTML, CSS and Javascript

Community feedback

• 

  P

  Boris•4,020

  @makogeborisPosted 9 months ago

  Hi allnyu, your solution looks great just need a few adjustments to make it better,

  • Your .mcontainer seems to be cut off from the viewport notably when the error messages are displayed, to fix that change the height: 100vh to min-height: 100vh on your body and some padding top and bottom. Also the container's max-width should be in rem.

  Some suggestions:

  • Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.
  • Media queries should be defined in rem or em not px.
  • Generally, when defining units you should use rem almost all the time because it scales with the base font-size set in the browser. Use em when you want a component to scale with the font-size of the current element, a button's padding is a great use case for em. Only use px on something you don't want the size to ever change.
  • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.

  Hope this helps!

  Marked as helpful

  1

  ---

  

  allnyu•20

  @allnyuPosted 9 months ago

  @mkboris thanks for the recommendations!

  1
• 

  shivani•600

  @shivani1410551Posted 9 months ago

  nice work!!

  1