@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