I’ve recently created a tool-based website, and while most of the functionality is working fine, I am facing a noticeable style issue. Specifically, the coin flip feature on my site displays a coin graphic that appears excessively large on the screen. This oversized coin disrupts the user interface and makes the overall experience feel unbalanced and less professional.
When I compared my site to my competitor’s website, I noticed that their coin graphic is much smaller and fits seamlessly within the page layout, offering a more refined and user-friendly experience. My goal is to reduce the coin size to make it look subtle and visually appealing, ensuring it doesn’t dominate the UI.
I believe a smaller coin will enhance the user interface and improve the overall user experience by maintaining balance and preventing distraction. I’m currently using basic CSS and JavaScript for the coin rendering but am unsure how to adjust the size correctly without affecting responsiveness or breaking the layout.
I would appreciate suggestions on how I can achieve this — whether by using CSS scaling, modifying image dimensions, or applying canvas adjustments — to ensure the coin displays at an optimal size across all devices.
Hi, I removed the link to your competitors website as it doesn’t help at all with your problem
We need to see your site or at least the code you are using to produce your effect. The coin in your competitors site was simply set to an arbitrary max-width but its width and height were set to vh units to enable it to scale smaller than the max-width.
Not without seeing what you already have in place unfortunately.
If you can’t post a link to your own site then post the code that produces the effect you are talking about and we can go from there. If you can’t manage that then at least upload a picture of the coin graphic you are having problems scaling so we can see what we are dealing with.
In simplest css terms you would do something like this:
Hey, nice work getting the tool up! You might want to wrap the coin in a container div and use max-width in CSS to control its size—have you tried that yet?
