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

Using flexbox, JS: regEx

Bezies 1,230

@Bezies

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


No particular difficulties for this small project. Except for a small detail, I'm having trouble with the size of my input and my button, I can't find a correct and simple setting so that they have the same size, any idea?

Community feedback

@pertrai1

Posted

Good work with the solution. When you say that you are having trouble with the size of the input and button, do you mean that it would be nice to only write code once and not have to duplicate for both? If so, you could take what is used for both of them and combine into one rule, i.e.

#email,
#sub {
padding: 15px 20px;
}

Then you can remove that from each individual rule. This way, you can change the value once and both will pick it up.

I hope that is what you meant when you need to find a way to have them the same size.

Marked as helpful

0

Bezies 1,230

@Bezies

Posted

@pertrai1 thank you for your comment. that's not really my problem. It's just that with an identical size and an identical padding the two elements are not the same size. I have to "tinker" to do it and in responsive it doesn't work well..

0

@pertrai1

Posted

@Bezies Try adding this to your CSS and then removing the custom width you gave to the input and the button:

*, *::before, *::after {
box-sizing: border-box;
}

Marked as helpful

0
Bezies 1,230

@Bezies

Posted

@pertrai1 i will try thank you

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