Signup component with clever js!

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted almost 3 years ago

  Hey, @HendrickGH lovely job here! 🙌 I've not much to add. I love the subtle transistions on the error states. One small suggestion would be to center the component on the page, I think if you add the following code this should help:

      min-height: 100vh;
      display: grid;
      place-items: center;
  

  This may cause some issues at small viewports so, I generally complicate this by using:

  body {
  	// all the rules above plus...
  	grid-template-columns: minmax(1rem, 1fr) minmax(375px, 1440px)minmax(1rem, 1fr);
  }
  
  .center-content > *  {
  	grid-column: 2;
  }
  

  The 1440px is the max-width you want the main content to be, and the 1rem values is the smallest spacing you want either side of the main content on small screens (I sometimes put this to 0 and use a container to add padding to each section).

  The second part positions all direct children of the body in this nicely sized middle column. In my case, mostly, my header, main, and footer the middle column, and stops them going wider than 1440px. It’s also pretty easy to ‘break’ elements out of this constraint if you need to.

  Other people use container classes to do the same thing. This article has a good run down of alternative approaches https://css-tricks.com/the-inside-problem/ You will note I am actually using the approach the author doesn't like!

  Just a small point but it's a good idea to find an approach that works for you as you'll need this for a lot of FEM challenges.

  Great work! 👍

  Cheers 👋

  Dave

  Marked as helpful

  0

  ---

  

  HendrickGH•260

  @HendrickGHPosted almost 3 years ago

  @dwhenson Thank you friend, I was used only CSS properties which watch on course of CSS from zero to mid-level and I thought what might use this properties and then will know advandced grid properties like minmax. About min-height is very useful and thank you, now I do remember that and so for the article about how center a content, I was listening about csstrick but really I didn't to use this platform, now it is part of my repertory:) Thanks for the support and sorry for my english, I hope this makes any sense. 😀

  0

  

  P

  Dave•5,295

  @dwhensonPosted almost 3 years ago

  @HendrickGH that's great - just take what you find useful and ignore the rest!! Keep up the great work!!

  Marked as helpful

  0