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

Calculator App mobile responsive and made with flex and grid

@freaky4wrld

Desktop design screenshot for the Calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello all, this one is very much interesting and cool challenge, adding to this if you are previewing the site on Google the theme slider doesn't look that cool as it looks on Mozilla(browser that I use) any suggestion on that, would be glad to discuss.

ALSO A QUICK QUESTION How to make my project to reach more people, so that I get more valuable advice, and I want to network with community member, how to do that as well.

Thank you for all the appreciation and valuable time spent to provide feedback

Community feedback

@BeinRain06

Posted

Amazing Nayan you ⛏ picked a good challenge to test your JS abilities and your css grid skills. Your questions is about how to fix the show of your Theme container in chrome :

Firstly input tag are sometimes subject of show change based on the browser you use. THAT happens because of different technologies each developer of these companies use to implement the browser

To correct that chrome has come with features like: -webkit-

Concerning your project try to add in

#calc-theme:-webkit-slider-runnable-track { ... margin: 0 auto;

}

And also :

#calc-theme::-webkit-slider-thumb { ... padding :0;

}

Or either one of the both previously mentioned.

You may want also to add transitional effect when the circle of your theme container move

You can do it by adding in #calc-theme an effect

E.g transition :all 1s ease-in-out ;

#calc-theme { .... transition: all 1s ease-in-out ;

}

Hope with that you will be able to make some move to fix the problem Nayan.

Marked as helpful

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