Responsive Signup form using HTML, CSS & JavaScript

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted 10 months ago

  Hi @bccpadge, that's a good solution. Keep coding. I haven't solved this challenge yet, but I can give you some quick tips:

  • You don't need to use the width property for your form class. This breaks the responsive behavior of HTML, use the max-width or max-inline-size property instead. In fact, it's better not to use the width and height properties in CSS with explicit values (the width property can be used with the percentage size unit, it behaves the same as block-level elements).
  • You can add the max-width property to your form__headline class to avoid making your button the full width of the page.
  • You can use the flexbox for the components and you can use the grid for an entire layout, but it's a good project to get some practice with the grid property.

  I hope these will help you. Keep coding and have a nice day...

  Marked as helpful

  0

  ---

  

  Rebecca Padgett•1,840

  @bccpadgePosted 10 months ago

  @adonmez04

  Thank you for the feedback. Can you elaborate on which components would use flexbox in this project? I am not a fan of implementing flexbox when you have to add more code to the stylesheet.

  0

  

  P

  Alper•1,010

  @adonmez04Posted 10 months ago

  @bccpadge You can use the display: flex; declaration for this project because it will be part of the main page and there will probably be other elements in the page. The display:grid; declaration could be for a more general element, like a container or body etc.

  For your main class, you can set the flex-flow: column wrap;, if you start the mobile-first design, and at some breakpoint, you switch to the flex-flow: row wrap; for the desktop version. Basically, you can apply this ruleset to your main class instead of grid:

      display: flex;
      flex-flow: column wrap;
      max-inline-size: 30rem;
      margin-inline: auto;
  

  You also don't need the grid property on your body element, it will have the same behavior with this margin-inline: auto; declaration. Using these tools sharply, you won't need too much code in your stylesheets.

  I highly recommend reading the Flexbox and Grid sections of this resource: https://web.dev/learn/css

  Marked as helpful

  0
• 

  Nikhil Tanwar•260

  @NikNTPosted 10 months ago

  Nice work, Rebecca! Your solution looks unique!

  1

  ---

  

  Rebecca Padgett•1,840

  @bccpadgePosted 10 months ago

  @NikNT

  Thank you!

  0