I have a specific requirement for my
<input type="number">
element where I need the up and down spinner buttons to be displayed for selecting the next value. However, on mobile devices, these spinner buttons are not visible. To address this issue, I want to create separate up and down buttons that will only appear on mobile devices. I came across a suggested solution in a Stack Overflow post, which recommended using a media query to show a DOM element when the screen size is small. However, I realized that if a user simply resizes the browser window on a PC, both the spinner buttons and the custom up and down buttons would be displayed.
To tackle this challenge, I attempted the following:
@media-desktop (min-width: 1px) {
.desk {
visibility: visible;
}
.div-only-mobile {
visibility: hidden;
}
}
Unfortunately, this approach resulted in both divs being visible on both PC and mobile devices.
My question is, how can I effectively display a DOM element exclusively on a mobile device while hiding it on a PC?
Thank you for any guidance or suggestions.