[Vuejs]-How can i center my v-img and v-card in a v-flex?

by

-1👍

Updated Answer

You need the v-flex to have attribute flex-grow-0 on size <= medium

And Parent div to have justify-content: center

The solution in this pic and in codepen here: https://codepen.io/meabed/pen/WqjgYL

enter image description here

OLD Answer

this is not an issue with the v-card, v-img.

This behavior is coming from vuetify.css lib, the padding changes from 24px to 16px

.container {
  flex: 1 1 100%;
  margin: auto;
  padding: 24px;
  width: 100%;
}

@media only screen and (max-width: 959px) {
  .container {
    padding: 16px;
  }
}

You can change this by overriding the padding to 24px in your own css

@media only screen and (max-width: 959px) {
  .container {
    padding: 24px;
  }
}

your codepen example https://codepen.io/meabed/pen/WqjgYL

👤Meabed

Leave a comment