Skip to content
Submitted over 1 year ago

Responsive newsletter with ReactJs (Junior's solution)

antben59•40
@antben59
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I had difficulties with the responsive of the site, especially the mobile version. I didn't know if i only had to do with 375px width screen or all the width screen from 1440px to 375px. I finally decided to do it from 1440 to 375px.

Do you have any advice for me for my future challenges for the responsive? Especially on the screen sizes that i must focus on, or websites that can help me to improve it.

Thanks !

Community feedback

  • Mandriva 19•330
    @mandriva19Posted over 1 year ago

    Good solution. layout looks good, only between 500-700px there's glitch https://i.imgur.com/v2P9OAY.jpg

    regarding screen sizes, that's the thing with responsive design - you have to make it look nice on all common viewports. if you are provided with mobile/desktop mockups only, you're going to have to craft middle ground (tablets, mid-screens) yourself. generally is a good practice.

    @good luck~

    1
  • Kenny Ng•400
    @kennylun123Posted over 1 year ago

    Congratulation on completing the challenge! It's always good to finish the mobile version first then work on the desktop or tablet version using media query. Also I saw that two of the flex item are reversed in between 500px ~ 700px width.

    @media screen and (max-width: 700px) and (min-width: 500px)
.newsletter-container {
flex-direction: column;  // Delete this should work. **
justify-content: center;
}
    0

Please log in to post a comment

Log in with GitHub

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