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

Responsive Age Calculator App

@Guiilhermeap

Desktop design screenshot for the Age calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Jack Smith 350

@Clonephaze

Posted

Looks good! A couple things though

  • Your mobile design breaks at 375 as thats where frontend says it tests for, but for better practice you should put that media query at something like 480 as thats more standard, then set the max-width of your containing element to something like "90vw" which would be 90 percent of the entire view width of the screen. That will scale the box as required to make sure its never bigger than that. You'll probably need to tweak some other min-values to allow for proper scaling but you can do it!

  • Your input fields have "value="DD", which puts DD or similar in the field that need to be removed by the user. Instead use "placeholder=DD" and you'll get text in the box that automatically removes itself as the user starts typing. You can stylize this text with "input::placeholder {color: grey;Font-style: italic;}" for example.

You also seem to have accidentally posted twice, you should remove that other post so you don't have duplicates.

Marked as helpful

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