Hi everyone,
I’m using Volumio with the Contemporary UI and I’m having trouble using the player controls in a browser. The seek bar and playback buttons sit very close to my operating system taskbar, so they’re hard to click (especially on small screens). I’d like to add a small footer / extra bottom spacing to the player area measured in centimetres so it’s consistent across devices, but I’m not sure the best place or the correct CSS to change.
What I see
- Skin: Contemporary (Volumio 3 UI)
- Problem element (from DevTools):
#player-bar > div:nth-child(1)— this appears to be the controls block - Effect: seekbar and control buttons overlap or sit too close to the OS taskbar, making them hard to use in the browser
What I want
- Add a bottom “footer” spacing to the player area so the controls are lifted up by about 8–15 mm (≈ 0.8–1.5 cm). I prefer to express this in cm in CSS (for example
margin-bottom: 1.0cm;) so it’s device-independent.
What I tried
- Injecting CSS via Tampermonkey to add
transform/margin-bottom— helped a bit but broke page layout in some cases. - Targeting
#player-bar > div:nth-child(1)directly — results were unstable because the UI re-renders dynamically.
What I’d like help with
- Best practice to add a persistent footer/spacing for the Contemporary skin without breaking layout (plugin, custom CSS file, or correct file path to edit).
- A safe CSS snippet that uses cm units and targets the correct selector(s) without breaking responsive behavior.
- Where to place the CSS so it survives updates (plugin vs theme file) and how to revert it if it causes layout issues.
Example CSS I’m considering (is this safe?)
css
/* lift player controls by ~1.0 cm */
#player-bar > div:nth-child(1) {
margin-bottom: 1.0cm !important;
}
Any pointers, safer alternatives (for example, compensating the seekbar container instead of the whole player), or exact file/plugin names and recommended selectors would be greatly appreciated. I can paste the exact selector from DevTools if that helps.
Thanks in advance!