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

@sumaira10041

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


Is there any mistake?

Community feedback

@IamArshadAli

Posted

First of all, Amazing Work!

Your desktop version does match the design.

But...

The mobile version is not responsive. As I can see you are using Flexbox which is nice. It would be best if you consider these changes inside the media query rules:

  1. Get rid of the "display: block" on your .container class. Instead, specify the appropriate flex-direction property.
  2. Increase the width of the .container class and make its height to fit the contents.
  3. Adjust the size of the remaining elements (if required).

Need more help? I'm here to Assist.

Happy Coding ;)

Marked as helpful

0

@sumaira10041

Posted

Thanks @IamArshadAli

1

@matiasluduena23

Posted

Hi sumaira10041’s! Good work! Just one recommendation that might make your write code more easy.

  • Try to avoid width and height instead you can use max-width and max-height. In your project change the #show remove the height and the width and use a min-width: 850px; play with this number. Also you can change this: change margin or padding in leftside and remove the height and add width in your image.
.left-side {
  padding: 20px;
}
.right-side img {
  width: 100%;
}

I recommend to you make this challenge.

Good code!!!

Matias

Marked as helpful

0

@sumaira10041

Posted

Thanks alot@matiasluduena23

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