Contemporary optimizations for small or large landscape displays

see post #178

I have checked the post but I can not figured out how should I adapt the file… Should I change the value of a variable?

Hi @Lintbf
No, it’s not a variable. I use a trick to hide buttons bar and enlarge the content area with a the gui.

search this string: /* GUI_ID: 200
you find it on two places.

/* GUI_ID: 200 - changed from GUI*/
@media (orientation: landscape) and (max-width: 0px) {
    #layout-container .main-container.with-playback-bar {
        padding-bottom: 0;
/* GUI_ID: 200 - changed from GUI*/
@media (orientation: landscape) and (max-width: 0px) {
    #footer-content #player-bar.playback-bar {
        display: none;

to enable this sections set the max-width on booth sections from 0px to a high value greather then your resolution.

unfortunetaly this is not possible with a css variable

I can not find this section in the css file. Do I need to performed the step from post 173?

Hi again
the installer on first post is now testet with Buster 3.074
best regards


Sorry for delay.

Have you solved your issue? If no then as first step please take a look at my thread reagarding this project: DIY streamer with volumio in standard 43cm box - #36 by Mayday

Hi @lausiv, witch issue do you mean?

As I understand it was to me - so I am asking if he still need help :slight_smile:

Hi I’m 3 questions… Please help me!
From where I can remove completely the album art? If I resize to -500 i see always.
If I resize the play button why don’t scale the random and repeat buttons? And the heart, plus e dots?

And it’s possible put under the play buttons bar the peppy meter two-bar


Sorry… and where I modify this dimension? It’s very little

@2aCD do you have a idea how to increase the width of a scrollbar?
i can’t use it at the momment… can’t get my fingers near it…
for the classic and contemporary

i tried webkit-scrollbar in the .css

not yet where is that?

Hi @nadirfly
I think, you can use a global scale factor to increase all content a little bit. With standard Volumio you find it as an option of the touchscreen plugin. For Buster add it to the /opt/

An option to disable the albumart complete is not available at time. I‘ll look if I find a possibility.

Hi @dvo
have you also try to use a global scale factor?

@2aCD tried that global scale does nothing for the scrollbar

:-webkit-scrollbar{width:45px;height:10px}: didn’t work… instead of standard 10px 10px

do you have still a ace on your sleve? i’m out of mine… resolution 1280 x 800

1 Like

hi nadirfly,
I don’t know exactly which mod du you use. I think mod 1 is right for this display.
To disable albumart manually in your xx_1.css do the follow:

search with spaces: #albumartContainer {

the first what you find is: #albumartContainer { 
		position: relative;
		top: var(--aaspace);
		left: var(--aaspace);
		height: var(--calcaadim);
		width: 100%;
		/* max-width: var(--aamax); */
		flex-basis: var(--calcaadim);
		min-width: var(--calcaadim);
		display: none;

add the line with display: none;

and for the goBack button in center search:

/* ----- changed begin GoBack button landscape ----- */

the first what you find is:

/* ----- changed begin GoBack button landscape ----- */
@media (orientation: landscape) {
	div#goBackPanelWrapper {
		position: absolute;
		/* left: calc(var(--calcaadim) + var(--aaspace)/2); */
		/* width: calc(100vw - var(--calcaadim) - var(--aaspace)/2); */

remark the left and width lines with /* … */

Then select the mod 1 again to activate the xx_1.css that you changed.

1 Like

with the standard PeppyMeter you have no possibility to change the position. I have a modified version with many additional options, also the position. Please read here a little bit at first:

1 Like

Hi again,

I have update the installer on the first post. If you use this new installer with a new installation, then it’s possible to revert to original VOLUMIO without changes (needed for an inplace update to a new VOLUMIO version).
to restore the original files use the uninstall script, thats now included.

best regards

nobody a idea?

I have no found a possibility to increase the scrollbars. It’s not a part of css.