almond-bongbong
commented
1 year ago Thank you for bringing up this issue, and we appreciate your detailed explanation of the challenges you're facing.
When the font size changes dynamically based on window size, re-calculating the styling becomes essential. We're considering adding a method accessible via ref that would trigger this re-calculation for situations like yours.
In the meantime, you could use two instances of the SlotMachine component, but instead of using display: none, you can use visibility: hidden to keep the component in the DOM and still allow for rendering calculations. Here's a simple example:
<SlotCounter value={123456} />
<SlotCounter containerClassName="mobile" value={123456} />And in your CSS:
.mobile {
visibility: hidden;
position: fixed;
left: -9999px;
font-size: 12px;
}
@media screen and (max-width: 768px) {
.mobile {
visibility: visible;
position: static;
}
}I appreciate your patience and feedback!
misstricky
Hi! This works great, except that I have a situation where the counter's font size needs to get much smaller in mobile. Its fine on window refresh in a different window size, but without refresh, the counter doesn't look right after after window is resized back/forth from desktop to mobile. I can watch for resize in the component, and I've tried some things like:
But nothing I've tried so far to change on resize seems to work and requires window refresh for the counter to look as expected again. Is there anything I can do?
Thanks!!