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

Responsive Newsteller signup Page

@A-noob-in-Coding

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


What are you most proud of, and what would you do differently next time?

It was easy

What challenges did you encounter, and how did you overcome them?

While working on the mobile design, the user_email reflected to the success message overflowed when a long email was inputed

I resolved this using the overflow property in CSS

What specific areas of your project would you like help with?

I would greatly appreciate advice regarding:

Using custom icons for radio buttons, cursors and list numbering e.t.c

Community feedback

P

@sikulamartin

Posted

on widther screens and on mobile it looks terrible, thats because you used display flex propety wrong, also the section.calculator into looks terrible because of the wrong usage of display:flex i would advise you look at some youtube tutorial or just go back to the learning path about the layouts, your js LGTM, and one last thing that i noticed, on the submit button there should have been linear gradient insted of just a color, so if you dont know how to do that, theres a site, that does it for you : https://cssgradient.io/

Marked as helpful

1

@A-noob-in-Coding

Posted

@sikulamartin Thanks for the constructive feedback, I'm gonna Incorporate the suggestions

0

@A-noob-in-Coding

Posted

@sikulamartin Hi there can you review the site again, I would love your feedback

0
P

@sikulamartin

Posted

@A-noob-in-Coding Hi there! I checked out the site, and it’s definitely looking better. I do have a few suggestions, though:

On line 180 of your styles.css, you’ve set the image height to 60vh. It might be better to set it to auto instead. For lines 198 and 199, I'd recommend setting both to auto as well. There’s no need to make them bigger than necessary. I’d suggest removing line 197. Without padding on top, it looks a bit off. That’s it for the first page. For the success message, I’d recommend giving the entire .success-container a width of around 375px, and setting the height to auto within your media query.

I hope these suggestions make sense! ;)

1

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