CODEWITHSUNDEEP
vue.jsvuetify.js
F4ll0ut
F4ll0ut

Reputation: 309

Remove content padding from Vuetify Parallax

How to remove padding from the content inside of a Vuetify Parallax?

<v-parallax src="https://cdn.pixabay.com/photo/2017/05/23/22/36/vegetables-2338824_960_720.jpg" style="min-height: 650px">
<v-row
  no-gutters
  align="center"
  justify="center"
  style="background-color: rgba(255, 255, 255, 0.6)"
>
</v-row>

https://codepen.io/mckraemer/full/eYORoBe

Upvotes: 0

Views: 509

Answers (2)

Andre Minnie
Andre Minnie

Reputation: 21

Just be careful, overriding the style .v-parralax_content only works if the tag is not scoped i.e.

A workaround for this is to create a global css file and override it there. Remember to point to it in your nuxt.config.js, for example:

    css: [
  '~/css/main.css'
    ],

Upvotes: 0

Asim Khan
Asim Khan

Reputation: 2039

If Vuetify has not exposed some prop which you need, you can also do that overriding the CSS. In your case, you can put a style tag at the end of the HTML section just like below

<style>
  .v-parallax__content {
    padding: 0px !important;
  }
</style>

it's working on your codepen

Upvotes: 3

Related Questions