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

Huddle-Landing-Page

@Mahmoudelhousiny

Desktop design screenshot for the Huddle landing page with curved sections coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

so proud of making it responsive while i walk into code not at the end as i was always did before

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

i think the only challenge is the customization of the font size and margins or padding because its a free virsion so i cant acsses the figma file

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

aligning the submitt button vertically with the input

Community feedback

@modiboCamara

Posted

for aligning the input and the submit button on the mobile version if would have been easier to make the form element a flex-container that way you could simply apply the flex-direction to column and then center aligned them.

but here is a solution for the setup that you have.

input {
  display: block;
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
}
button {
  margin: 0;
  display: block;
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
}

Add this code to your stylesheet and it should solve your problem. and make sure you don't have any specificity problems otherwise this code will not be applied.

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