HTML, CSS and JavaScript

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted about 3 years ago

  Hi @Ahmed0107 nice job here. 🙌

  With regards the mobile layout, I would suggest setting the height of the body element as min-height: 100vh and then moving some of the styles from your first wrapper to the body (such as the background image/color etc).

  If you then, add the flex settings you have on the wrapper to the body this should then position the wrapper, and everything inside it, at the center of the viewport at all resolutions. At the moment it's not working on mobile views.

  You can probably then do away with the container inside the wrapper and just set a max-width on the wrapper div. Hopefully this should keep things centered. I'd avoid specifying heights on anything if possible, and only a min-height if you really have to.

  Getting things laid out in the center of the screen is tricky, but as it will come up again and again in these challenges it's worth spending a bit of time to find an approach that works for you.

  Cheers 👋

  Dave

  Marked as helpful

  2

  ---

  

  Ahmed Sameh•60

  @Ahmed0107Posted about 3 years ago

  @dwhenson thanks for your time and your comment it's helps alot

  0
• 

  Conrad•950

  @ConradMcGrifterPosted about 3 years ago

  its pretty decent. I would rate it 7.5/10

  • I think you need to fix the layout on mobile
  • on desktop at larger resolutions your design is stretching so try putting a max width on your div container
  • I think you need to validate the password better because currently you can enter just 1 character and it will accept it. maybe put a length requirement

  Marked as helpful

  1

  ---

  

  Ahmed Sameh•60

  @Ahmed0107Posted about 3 years ago

  @ConradMcGrifter thanks I will try to validate the password with a special character and length

  0