Search code examples
cssvue.jsvuetify.jsjustify

How to change justify depending on the size of the screen in Vuetify?

In my application, I use the end justified button by justify="end". If there is a smaller screen (e.g. tablet) I want to change it to center justification - justify="center".

My code:

<template>
  <v-row  justify="end" >
    <v-col cols="5">
      <v-btn
        to="/"
        >Back</v-btn
      >
    </v-col>
  </v-row>
</template>

I also tried to use css styles something like this but it doesn't work:

<style scoped>
@media (max-width: 800px) {
  .justify{
    justify: center;
  }
}
</style>
Solution

  • instead of the props you can use built in flex classes in vuetify like .justify-md-center

    have a look at this link in the vuetify documentation:

    vuetify flex classes documentation