Home » vue » vuetify card without left and right margin

vuetify card without left and right margin

Posted by: admin November 26, 2021 Leave a comment

Questions:

I am new to vue and vuetify and just use v-card tag from vuetify.

I want that the v-card have 100% width, (without left or rigth side spacing)

Is there any configuration that can be made on these initial tags ?

<v-layout
    column
    justify-center
    align-center
  >

  <v-flex
      xs2
      sm2
      md2
    >

How can it ben done ?

I try :

.section{
    padding-top: 100px;
    padding-bottom: 100px;
    width:100%;
  }

and :

<div class="section section_dark">services</div>

But still there is some left and right space for this div.

Answers:

You can try row instead of column :

<v-layout
    row
    justify-center
    align-center
  >

and use special props for card :

<v-card
  min-width="100%"
>

###

I think you may be able to use the spacing helper classes.

Look here: https://vuetifyjs.com/en/framework/spacing

You can add this to your div, I believe:

<div class="section section_dark ma-0 pa-0">services</div>