[Vuejs]-How to make vueitfy v-layout to cover the whole width of the screen

by

0👍

Checking out the codepen example [a link] (https://codepen.io/pen/?&editable=true&editors=101) on Vuetify for the Avatar with 3 lines

They have the width setup in their v-card

<v-card
      max-width="450"
      class="mx-auto"
    >

You should have something like this above where you start your template, maybe right below where the app is started div id="app"

If you don’t have anything like that, try putting it in the v-container

<v-container max-width="1080" fluid>

Hope that works!

0👍

I found the reason why it didn’t work. In my index file (which is the parent file) in which I call the component that has this code, I had <v-layout column wrap> instead of <v-layout row wrap>.

<template>
  <v-container class="mx-auto">
    <v-layout column wrap>
      <v-flex>
        <MyProfile />
        <Education :items="items" />
      </v-flex>
    </v-layout>
  </v-container>
</template>

This caused the width to be small. Once I changed it to row, the width of the layout expanded.

Leave a comment