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

base apparel

@fee-sah-yor

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


please i would appreciate any feedback given. when coding this challenge it looked and worked properly on my system. Especially the arrow button and the error icon, but after publishing they have moved positions. On regular screen they are positioned well but on inspects 1440px, the positions are different, so adjusting it will make the other different. If you have any suggestions, i would gladly take them. Thanks

Community feedback

Ahmed Kamel 1,190

@hmadamk

Posted

the input is a self closing tag so position relative on it is futile so what you might want to do is to use a label instead mkae the input a child of the label make the label position relative and make the image postion absolute and use percentage like so .image{position:absolute; left:90%;} or you could use the position on your .email-field div i'd rather you use label as it's more semantic but it's your call so you could do .emailfeild{ position relative } .emailfield .error { position: absolute; /* left: 460px; */ /* top: 448px; */ */ top: 25%; left: 150px; display: none; } .emailfield .image { position: absolute; left: 80%; }

Marked as helpful

1

Ahmed Kamel 1,190

@hmadamk

Posted

@hmadamk if this helped you, you might consider mark it as helpful

0

@fee-sah-yor

Posted

@hmadamk Thank you so much. i tried using the label tag and it worked but the error image and arrow button are still not positioned properly when i close the inspect page

0
Ahmed Kamel 1,190

@hmadamk

Posted

@fee-sah-yor I think you shuold use the solution above by using your own .emailfield and the next time you build you should use labels and forms this is not going to be easy but the purpose of is to make your website accessible to all people around the world so you want to try it next time

0

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