[Vuejs]-Play PWA with max width

by

0👍

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.

Leave a comment