Intro Component With Sign Up Form

Solution retrospective
The error icons. I asume there most be some easier way to keep their position.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @kodan96
hi there! 🙌
<div class="wrapper"> <input type="text" required class="data-field" name="" id="field-name" placeholder="First Name"> <img id="error-icon1" src="images\icon-error.svg" class="error-icon" alt="error icon"> <p id="error-msg1" class="error-msgs">First name cannot be empty</p> </div>
Create a section like this for all the input fields in the form, then apply
.wrapper { position: relative; } .error-icon { position: absolute; right: 2rem; transform: translateY(-50%) }
You might need to play around with the transform or give right a negative value, but this should position it. 📐
Hope this was helpful 🙏
Good luck and happy coding! 💪
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