Play PWA with max width - vue.js

Question

My PWA in a desktop browser is not really cool (because i don't have a lot of information to show).
And I would like to limit the width to 768px.
I tried many solutions, but i can't to change elements in position "fixed" like v-navigation, v-footer, v-dialog, ...
they are always 100% of the width of the browser.
I tried this in app.vue or in index.html:
html,body,#app {
max-width:768px !important;
overflow: hidden;
}
and last time I tried this in index.html:
#mytable {
width: 100%;
overflow: hidden;
}
#mytable td{
width:50%
}
<table id="mytable">
<tr>
<td>
<div id="app"></div>
</td>
<td>other half</td>
</tr>
</table>
But no solutions works.
Thanks for your help
Marco

Answer 1

Your problem seems you need different layout in function of screen size. You have several solutions from media queries to simple margin. Here I will explain how to do what you want with just margin.
I advise you to use a div to wrap your content and do not apply all your style in your #app container. Why ? Because you can imagine for instance that you want a top bar that take all the width and a content that take only 768px. If you make your layout in only one block this will be very complex. Separation in several block is a good strategy to have a modulabe UI. So we will use this template. You can make whatever you want in the .content div.
<div id="app">
<!-- Here we can imagine a top bar -->
<div class="content">
<!-- Display whatever you want -->
</div>
</div>
First you need to prepare your app container to display your application in all screen. I suggest this css :
html,body,#app {
overflow: hidden; // If content is large it will display scroll bar
height: 100vh; // Tell to your browser to take 100% of the available viewport height
}
Then you can define the css of the .content block :
.content {
max-width: 768px; // Max-width you want
height: 100%; // Take all the height available
margin: 0 auto; // Display div at the center
}
Here is an example: jsFiddle
If you are very interested in layout design, I strongly advise you to look into flex box and css grid.