Fixed screen width

Mobile Apps Bugs
,
1

Hi guys,

I am designing PWA app for mobile only. We need the width of the screen to be fixed in all situations, even if viewed on desktop.
At the moment some widths of some items are fixed, others are not, so when viewed outside of mobile emulator - can be quite messy.
The main thing is to have a fixed screen / page width eg: 480px +/-.

How can this be applied globally and to all pages / screens? Is there a project setting? It is not obvious if is the case.

  • be also good to know that the area outside of the fixed area - I can select a background colour, to help user focus on the central content. (eg: light grey bkgd and white for the fixed page).
    So that no matter what device the app is viewed in - it is consistent.
    Thanks
2

Add the following style rules. Adjust the values to suit.

    html {
        background-color: yellow;
    }
    body {
        background-color: white;
        max-width: 480px;
        margin: auto;
    }
3

Thanks.
Got occupied with other things to reply!

Just to be clear - do I place this in Code area?
Minus the {} brackets?

Thanks