Display:flex, display:grid, media query and javascript DOM manipulatio

Community feedback

• 

  Yemisrach•1,430

  @Yemisrach15Posted about 2 years ago

  Hi Osman, good job! Some suggestions,

  • Instead of putting each word of the header into a h2 tag, add <br /> after each word.
  • I'm not sure the need for the aside but it could be replaced with an image. Makes more sense.
  • If input is wrapped with a label, there's no need for for attribute on label.
  • On mobile version, the error message is situated above the email input.

  As for your question, the culprit is grid-column: 2 / 4; on .article. 2 / 4 in grid means it'll take up 2 columns, the second and third. Change this to grid-column: 2 / 3. It's the same problem with the button. The form should have grid-column: 2 / 3 not 2 / 4 and also remove the width so that it doesn't overflow its containing block.

  Marked as helpful

  1