Responsive Jukebox UI Refinement
Budget: $10 – $30 USD
I have a working Node.js-based jukebox interface built with plain HTML, CSS and vanilla JavaScript. On some desktop-class screens it renders perfectly, yet on others—specifically at 1280 × 1024—the search-results panel shows only 9½ of the 10 items in view. I either need that area to scale correctly or, even better, become touch-scrollable so the user can swipe smoothly between the sticky header and footer without relying on the up/down arrows I placed as a stop-gap.
Your task is to refactor the existing front-end so it:
• Renders cleanly on every larger display size I might encounter, with 1280 × 1024 as the baseline.
• Enables direct swipe gestures (vertical) inside the results list; hardware scrollbars or arrow buttons should no longer be required.
• Preserves my current look and feel but adapts responsively instead of fixed-pixel layouts.
• Works flawlessly in Firefox; bonus points if it remains solid in Chrome and Safari, but Firefox is the one that matters.
Please deliver updated HTML, CSS and JS files (or patched snippets) together with a brief note explaining any structural changes so I can slot them straight back into my Node.js project. I’ll test on a touchscreen monitor at 1280 × 1024 and larger; once every item is either fully visible or reachable via a finger swipe, the job is done.
Very simple job for someone that knows what he/ she is doing...
Your task is to refactor the existing front-end so it:
• Renders cleanly on every larger display size I might encounter, with 1280 × 1024 as the baseline.
• Enables direct swipe gestures (vertical) inside the results list; hardware scrollbars or arrow buttons should no longer be required.
• Preserves my current look and feel but adapts responsively instead of fixed-pixel layouts.
• Works flawlessly in Firefox; bonus points if it remains solid in Chrome and Safari, but Firefox is the one that matters.
Please deliver updated HTML, CSS and JS files (or patched snippets) together with a brief note explaining any structural changes so I can slot them straight back into my Node.js project. I’ll test on a touchscreen monitor at 1280 × 1024 and larger; once every item is either fully visible or reachable via a finger swipe, the job is done.
Very simple job for someone that knows what he/ she is doing...