Skip to content
Submitted about 2 years ago

Responsive component signup form using CSS flexbox and JavaScript

Shane Pinder•190
@ShanePinderDev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro component with sign-up form
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Any and all suggestions for improvement are welcome.

Specifically, if anyone can tell me how to get rid of the background images in the First Name and Password inputs that seem to be automatically added by the Form element. I have searched but I haven't come across a solution yet.

Community feedback

  • James Le-Goff•310
    @jameslegoff92Posted about 2 years ago

    Hi there Shane,

    Good work on this project. I would just like to point out some things about your project.

    1. You should apply the background image and color on the <body> element. If you give a min-height of 100vh to your <body> element you'll have your background image take up the entire viewport. Hence, you won't have any whitespace ruining your design.

    2. At the screen width of 607px the design start's to break.

    I would challenge you to fix these 2 things. It will definitely help you for when you start designing more complex UIs.

    Happy Coding!

    Marked as helpful
    0
    Shane Pinder•190
    @ShanePinderDevPosted about 2 years ago

    @jameslegoff92

    Thanks for your response!

    I've put the background image and color on the <body> and that fixed the white space issue! Such a simple fix, yet something I didn't even think of at the time :(

    I will look into the design breaking a 607px in a bit and see if I can figure that out.

    1
    James Le-Goff•310
    @jameslegoff92Posted about 2 years ago

    @ShanePinderDev If you try to fix it but can't and you need some help, feel free to send me a message :)

    Good luck 👍

    0
    Shane Pinder•190
    @ShanePinderDevPosted about 2 years ago

    @jameslegoff92 Thanks much! I will reach out to you if I get stuck.

    0
    Shane Pinder•190
    @ShanePinderDevPosted about 2 years ago

    @jameslegoff92 I've had a go at trying to fix the problems with the responsiveness of the component. I've added some additional media queries and changed a few things. I've uploaded a new CSS file on which I've left the previous code commented out. Hopefully this will make it a bit easier for you to follow. If you have time to have a look at it and let me have any other suggestions that would be great.

    0
    James Le-Goff•310
    @jameslegoff92Posted about 2 years ago

    @ShanePinder I just checked it out. Awesome job my guy 👍 There's only one thing to point out. In your styles.css file on line 286 you have your container class that has a background image. It's creating a overlay with the background image on your body. So just remove it from your container class and it'll be time for you to move onto your next project 👌

    I would suggest you try building one of the landing pages offered on this platform. It'll be challenging but you'll definitely learn a lot more that way.

    Always feel free to message me if you have any questions or need help.

    Happy Coding!

    0

Please log in to post a comment

Log in with GitHub

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