Layout for Small Screens

[eximo84]

I'm just looking at the code and wondering if adding an additional media query into the css would allow me to fit the web page to smaller screens?

I'm using an MPI3501 which has a 320×480 resolution. I'm running chrome full screen but the controls are only visible if I zoom out from 100%.

[idcrook]

It supports breakpoints for particular devices/sizes.

you could adjust the breakpoints in the CSS for your devices

[idcrook]

a related concept is to scale the viewport in an iframe for specific size settings, as this can work without adjusting CSS and layout, but it may not be sufficient for your situation.

[eximo84]

So if I edit the css in /static/css/style.css then restart the app it should update?

I'll have a play around.

[idcrook]

So if I edit the css in /static/css/style.css then restart the app it should update?

I'll have a play around.

While testing changes, you might need to also tell your browser to Force Reload the page, so it doesn't use a cached version. Chrome debug tools (can bring up with a right click on a page and select "Inspect Element") is also quite useful for debugging things like this. If I recall correctly, the screen size dimensions are already printed to the browser "console" in the javascript debugger. Good luck.

[idcrook]

You can access the server from another computer (say a PC with a bigger screen) for iterating more quickly. URL will be the IP and the port so something line http://192.168.1.2:8080

In the Chrome DevTools you can specific manually screen window sizes to, e.g, view or test among different CSS breakpoint settings. That is how I developed it.

[eximo84]

So after some tweaking ive got the following which works for my small screen size, the raspberry pi os doesnt have a dark mode so i forced the dark background and colours.

   body {
        background-color: #262934;
        color: #f3f5f5;
    }

    #now-playing {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 15px;
    }

    #trackinfo {
        display: block;
        /*flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;*/
        width: 100%;
    }

    #player-id {
        display: flex;
        flex-direction: row;
        align-self: flex-start;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
    }

    #coverart-container {
        float:left;
    }

    #coverart {
        height: 160px;
        margin: 0 15px 0 0;
    }

    #artist {
        margin: 0 0 10px 0;
        width: 100%;
        font-weight: 700;
        font-size: 1.4em;
    }

    #album {
        margin: 0 0 10px 0;
        width: 100%;
        font-size: 1.3em;
        color: #8990a9;
    } 

    #track {
        width: 100%;
        font-weight: 600;
        font-size: 1.3em;

    }

    #genre {
        /* margin-top: 10px; */
        visibility: hidden;
    }

    #updateinfo {
        visibility: hidden;
    }

    #button_volumedown {
        visibility: hidden;
    }

    #button_volumeup {
        visibility: hidden;
    }

    #button_stop {
        visibility: hidden;
    }

    #button_mute {
        visibility: hidden;
    }

    #button_playpause {
        background-color: crimson;
        background-image: none;
        border-color: transparent;
        text-shadow: none;
        box-shadow: none;
        color: #f3f5f5;
        width: 50px;
    }

    .slider-handle {
        background-image: none;
        background-color: crimson;
    }

    .slider-track, .slider-selection, .slider-track-high, .slider-track-low {
        background-image: none;
        background-color: #3c4153;
    }

    #button_fw, #button_bw {
        background-image: none;
        background-color: transparent;
        border: none;
        text-shadow: none;
        box-shadow: none;
        color: #f3f5f5;
    }

    .text-center {
        width: 100%;
    }

    .player-playback-control {

        display: inline-block;
        margin:  0 15px 0 15px;
        border-radius: 100%;
    }

    .player-volume-control {
        width: 100%;
        margin-top: ;
        margin-left: 0;
        margin-bottom:  0;

    }

[idcrook]

nice! glad you were able to adapt to your touchscreen