Submitted over 1 year ago

Age calculator app

PXVC•575

@PXVC

Preview site View code

This is a solution for...Age calculator app

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

HI. This is my second React project, So it's a little buggy. And I have just finished my high school entrance exam, so I'm very tired. Because of this, my project is not finish just yet, I haven't do mobile design. So I'm love your suggestions for my project :)

Community feedback

Sahil Atahar•260

@sahilataharPosted over 1 year ago

Hi I am Sahil Atahar. There is some issues in your project.

Here are solution of some problems:

Hide input number arrow

/* Hide Input number arrow  for Chrome , Safari*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
display: none;
-webkit-appearance: none;
margin: 0;
}

/* For Firefox*/
input[type="number"] {
appearance: textfield;
-moz-appearance: textfield;
}

Fix bottom credit paragraph:

/* For medium and large devices */
.attribution {
width: 100%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
text-align: center;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}

.attribution a {
color: var(--purple);
}

/* For small devices */
.attribution {
position: static;
transform: translate(0);
-webkit-transform: translate(0);
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
}

Marked as helpful

Please log in to post a comment

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