Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Very responsive Contact Form

Desktop design screenshot for the Contact form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I've done this project :)

What specific areas of your project would you like help with?

Height and positioning the contact. I don't know why, but when is in the browser editor, the height of the objects and position of the success alert is messed up. Everything you share will be appreciated!!

Community feedback

Borisβ€’ 2,870

@mkboris

Posted

Hi sksksk2024 nice work, to fix the height issue, change the height of the body to min-height: 100vh; also remove all the heights you set on the article completely and it should be fine. Avoid setting fixed heights and widths on elements as this will cause lots of issues with the responsiveness of your layout, the element's content and using padding should determine it's size. Use max-width or min-height if you absolutely have to and the units should be relative units like rem.

Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset.

Media queries, font-size should be defined in rem not px

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord