Intro component with sign-up form

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted over 3 years ago

  Hey @odpinerosh - you've done some nice work here! 🙌 Good job as the site looks good on desktop and mobile. 👍

  With regards your question on center alignment of the icon, this is a pattern that comes up again and again so it's worth spending a bit of time getting comfortable with it. I use the following approach:

  1. Wrap the input and img in a parent elephant - I tend to use a label for this which helps meet accessibility requirements. Set the label as position: relative

  2. On the img if you want it at the right side, add position: absolute, right: 0 - swap this to left if you want it on the other side.

  3. We now need to center the icon in the input vertically, I use something like top: 50% and then transform: translateX(-50%) to do this.

  Hopefully that should work, if not have a play around as I might have got some of the details wrong, but in general it works for me.

  The only other thing I would suggest is that you switch your final input to a button for to enable the form to be submitted.

  Hope this helps and great work here! Keep up the good work!! 👍 Cheers 👋

  1

  ---

  

  Oscar Daniel Piñeros Hernández•60

  @odpineroshPosted over 3 years ago

  Thank you so much. I will keep that in mind. : )

  0