I recently started developing a web application using Vue.js and Vuetify (https://vuetifyjs.com/en/). Currently, I have a basic layout with 3 columns. However, I noticed that the width of these columns is restricted to a maximum of 960px due to some default CSS settings. I want the columns to span the entire width of the screen. Can anyone explain why this limitation exists and how I can override it? You can view the code snippet here.
<div id="app">
<v-app>
<v-content>
<v-container ma-0 pa-0 fill-height>
<v-layout row>
<v-flex xs4> Chat List </v-flex>
<v-flex xs4> Main Chat</v-flex>
<v-flex xs4> User Profile</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
The predefined CSS:
@media only screen and (min-width: 960px)
.container {
max-width: 960px;
}