Submitted 4 months ago

Responsive Newsteller signup Page

Abd Ur Rehman•360

@A-noob-in-Coding

Preview site View code

This is a solution for...Newsletter sign-up form with success message

HTML
CSS
JS

2junior

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

Martin Šikula•380
@sikulamartinPosted 3 months ago
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
Abd Ur Rehman•360
@A-noob-in-CodingPosted 3 months ago
@sikulamartin Thanks for the constructive feedback, I'm gonna Incorporate the suggestions
0
Abd Ur Rehman•360
@A-noob-in-CodingPosted 3 months ago
@sikulamartin Hi there can you review the site again, I would love your feedback
0
Martin Šikula•380
@sikulamartinPosted 3 months ago
@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

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