Skip to content
OverviewSolutions
17
Comments
12

Christopher Till

@chri55New Jersey1,070 points

Recent graduate of Rutgers University - Camden. Loves to make cool projects for the web. https://repl.it/@chri55

I’m currently learning...

Sass, React, taking recommendation for others.

Latest solutions

View more solutions

Latest comments

  • Christopher Till•1,070
    @chri55

    Hi Karin, very nice work on the design!

    One aesthetic suggestion I would recommend is putting cursor: pointer on the .button class instead of the contained a, this way the user knows the entire button is clickable.

    As for your code, very nice. You used media queries which is good, but something I'd do is make one large section for a media query at the end or beginning of the file, since it seems you wrote the same media query over again multiple times. It'll let you write less code overall! See this code on my GitHub for an example of the structure of a larger media query section. Don't mind the content, as its from a different challenge.

    Keep it up, happy coding!

  • Christopher Till•1,070
    @chri55

    Hey Robert, I saw your updated question about the error message placement. In looking at your code I saw what you meant by transforming the button's location when the error message is shown.

    I think your solution fine for desktop, where space is ample but on mobile transform could become weird at any point, or on any device/browser. So I replicated a quick example of your form on CodePen and modified some things so that no transform or opacity is necessary on mobile. Take a look and let me know what you think, I left some more detailed comments about what I did in there.

  • Christopher Till•1,070
    @chri55

    Hi Tomy,

    If you look in your developer tools console after searching an IP, you may see an error which says "Mixed Content": your fetch call is getting data over http, but the app itself is being served on https through Vercel. Change your URL in the fetch call to use https and it should at least be able to make the call to the API once deployed.

  • Christopher Till•1,070
    @chri55

    Hey Robert, well done. A couple answers to hopefully point you in the right direction:

    1. I think I read your question right, you said you tried to use a media query with vw in place of px. The vw and vh units (like rem and em) are relative units, and they are relative to screen size rather than absolute, so it's always best to use an absolutely defined unit like px to ensure the media queries work.

    2. I believe some browsers set the outline property by default when an input field is clicked on, try adding a state rule for :focus on the text box and give it outline: none and see if it works. However this is not recommended in production as visual impaired users need that outline to see what they have selected.

    Great work, hopefully I answered some of your questions, and good job matching the design!

  • Christopher Till•1,070
    @chri55

    Very nicely done, looks great on mobile and your code is neat, concise, and easy to read. Great work!

  • Christopher Till•1,070
    @chri55

    Looks great on mobile, good job with responsiveness!

    The tiny suggestion I have would be to add the box shadow to the card itself, and the sign up button, but that's just a very small detail. I feel it helps solidify the "card" look and make it more obvious to the user. It also helps the white to stand out against a light grey background.

View more comments