Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Newsletter Sign-up form with success message

yodit93 40

@yodit93

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Regarding the mobile version, the user couldn't see the whole page once. He/she should scroll down to get the form. How can I improve the UX?

According to the instructions the desktop version starts from 1440px, this makes all devices with less screen size than this take the mobile layout. The UI doesn't seem good on those screens. Is there any way I can improve this layout?

Community feedback

@HectorKayman

Posted

The instructions say:

The designs were created to the following widths:

    Mobile: 375px
    Desktop: 1440px

All sizes between 375px and 1440px shouldn't be considered mobile, you can simply make sure the design stays the same as desktop design, till all the empty space around the #signup-page has disappeared, after that it can change into mobile design.

Marked as helpful

0

yodit93 40

@yodit93

Posted

@HectorKayman Thank you for your constructive feedback. In mobile design, the #signup-page holds the whole width while it is 65% in the desktop design. Are you saying that the instruction only considered two single widths? I don't need to worry about the width between them.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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