vuetify card without left and right margin

Question

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.

please provide a pen like [this](https://codepen.io/anon/pen/zXPwJN?&editable=true&editors=101) in order to help you — Boussadjra Brahim, Apr 15 '19 at 19:28
You can use class `ma-0 pa-0`, which would apply 0 margin and 0 padding. [vuetify spacing](https://vuetifyjs.com/en/framework/spacing#spacing) — ljubadr, Apr 15 '19 at 19:28
Possible duplicate of [Removing Margins and Padding within Vuetify](https://stackoverflow.com/questions/50417431/removing-margins-and-padding-within-vuetify) — Traxo, Apr 15 '19 at 19:29

score 2 · Answer 1 · answered Apr 16 '19 at 17:54

2

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

You can add this to your div, I believe:

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

answered Apr 16 '19 at 17:54

Josh Newlin

I try, but still there is a hard to find property, that maintains some good space from the right margin of the browser. All i do was using nuxt js to generate a PWA app and choose the vuetify framework. – Ângelo Rigo Apr 17 '19 at 12:49

score 1 · Answer 2 · answered Apr 15 '19 at 20:36

1

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%"
>

answered Apr 15 '19 at 20:36

Piva Gregory

Now, using row and min-width:100% the left collumn disappear, but the right collumn is still active, i am looking what can it be – Ângelo Rigo Apr 16 '19 at 13:24

2 Answers2