Submitted over 1 year ago

age-calculator-app

MIREILLE-646•50

@MIREILLE-646

Preview site View code

This is a solution for...Age calculator app

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

This challenge was done using HTML, CSS, Bootstrap, and JQUERY. please if there is any thing that you thing can help me improve the challenge feel free to send me a feedback.

Community feedback

Abdul Khaliq 🚀•72,560
@0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

Luckily your are using Bootstrap framework instead of vanilla css so i can demonstrate with Bootstrap css to use Flex to center the component. Just add these utility classes to body

<body class="d-flex align-items-center justify-content-center vh-100">

Now remove these utility classes, after removing you can able to see the changes

<div class="mt-3 py-5"> </div>

Now your component has been properly centered

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
Marked as helpful
0

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