Vuetify: What is the proper way to create a fixed width centered container?

[sebastianmacias]

Even if I use a container without the "fluid" attribute it extends to the full width of the screen.

i.e:

 <v-container>
  <v-row>
    <v-col xs12="xs12" class="slogan">
      <h3 class="text-xs-center slogan">My Text</h3>
      <h4 class="text-xs-center slogan">My subtext</h4>
      <v-card class="primary">
        <v-card-text>12</v-card-text>
      </v-card>
    </v-col>
 </v-row>
</v-container>

I ended up adding some padding with CSS:

.container {
  padding-left: 14rem;
  padding-right: 14rem;  
}

But it doesn't feel like the right solution since I would need to use a lot of media queries to make it work across different resolutions.

[johnleider]

The container has a default gutter of 2rem (28px). Using what you just posted, this was properly on the container. If you want to apply a fixed width to the container, just do that in css.

[sebastianmacias]

In case anybody runs into the same issue, this is what I ended up doing:

.container {
  max-width: 1200px;
}

[smyth64]

@sebastianmacias
hey man!

I had the same issue.
My pull request solved this issue!

https://github.com/vuetifyjs/vuetify/pull/177