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 Coming soon page using grid and flexbox.

Sergio 220

@SergioCzP

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm not sure if exists a better way to make that input and the button submit stay one above the other. Well, I couldn't see clear the background image, I just tried my best with that. 😆 If you see other problem or you want to give a feedback, I'll appreciate that.

Community feedback

jerry 320

@realsale

Posted

Yo! Sergio,

Congrats taking and completing the design.

Regarding to your input controls, there's no wrong in stacking one input control into another, and there's actually a better way you can achieve that same layout

Since both the input and the button share the same line, You should create a wrapper that'll group those elements.

<form>
  <div class="control-group">
    <label><input type="text" /></label>
    <button></button>
  </div>
</from>

Then instead of setting a position property to all input controls just set position: relative in div wrapper and set position: absolute in a button alone, and get rid of intentional setting the width: 100+% in the input

Marked as helpful

1

Sergio 220

@SergioCzP

Posted

@realsale I'm gonna try that, thank you. 🤝🙌

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