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

CSS Grid, Flexbox

John Soto 130

@Soto-J

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • Had difficulties positioning the error image in the form.

any feedback would be appreciated :)

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey, John Soto! 👋

Nice job on this challenge! 👏

One way to add and position the error icons in this challenge would be add the icons directly to your HTML markup and then wrap both each icon and its associated input element in a wrapper. Set position: relative to the wrapper element and then use absolute positioning to position the icon relative to the wrapper and on top of the input element. That's what I did in my solution to this challenge, and it seemed to work out rather well. 🙂

One other small suggestion I have is to add some space between the side of the form and the page in the tablet view of the site (just so that the form isn't right next to the edge of the screen when the screen size decreases). 😉

Hope you find these tips helpful. 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

2
Yokke 640

@Jexinte

Posted

Hey @Soto-J ,

You can easily place your error image by giving a relative position to your input and absolute position to your image then whenever the size of the screen is the img won't move from the position that you've set.

I think that for your media queries when the screen is near ~992px you can switch to mobile version especially in your case when your form doesn't have enough space around ~850px.

Besides that good job !

In hope it helps !

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