Design comparison
SolutionDesign
Solution retrospective
What specific areas of your project would you like help with?
The error icons. I asume there most be some easier way to keep their position.
Community feedback
- @kodan96Posted 6 months ago
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! ๐ช
0
Please log in to post a comment
Log in with GitHubJoin 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