@IamArshadAli
Posted
Hello There! 👋
Congratulations on completing this challenge 🎉
I do have some suggestions that might interest you. 💡
Overflow:
Your content is overflowing because of two reasons:
- You've only specified
margin-left
to your.container > *
- You are explicitly setting the
width
of the.listItem
&.inputContainer
to100%
Overflowing problems can be fixed by
.container > * {
margin: auto 20px; // set horizontal margin to your .container children
}
.listItem {
width: --webkit-fill-available; // acquires the available space to prevent overflowing
...
}
As there is a list of features, wrap them in a <ul class="list"><li class="listItem">...</li>...</ul>
instead of <span class="listItem">
One more area I found that can be improved in your code is your submit button:
Button:
Instead of explicitly setting width
and height
and then specifying flex
to center the text, you can give padding
to the button and align the text to the center like this:
<button class="button" type="submit">...</button>
.button {
text-align: center:
padding: 10px 25px;
width: 100%; // gets the full width from the parent flex container (.inputContainer)
}
Above all your solution looks great! ✨
As I said, you already did an excellent job, but these details will improve it even further. 🚀
I hope this helps 👍
Happy Coding 🤓
Marked as helpful