Vuetify css over-ride changing the view of a component

user_11043676 0
Viewed 28

I have a component to render some products, both mobile view and desktop view has different styles. I assign classes for desktop and mobile inside the <div> according to the requirement desktop and mobile view div's CSS display attribute display:none; and display:block; changed.

On mobile view I have to display a row and inside two products will be display so I code it as follows:

<!-- MOBILE ONLY PRODUCT DISPLAY COMPONENT-->

    <v-row class="mobile_product_view ">
       <v-col cols="6">aa</v-col>
       <v-col cols="6">bb</v-col>
    </v-row>

/* CSS large mobile size */
@media screen and (min-width: 425px) {
  .mobile_product_view {
    display: block;
  }
}

Question:

Without assigning class="mobile_product_view " attribute to <row> it render the columns as what i want. when i assign the class attribute the columns display one under another. what i want is cols should be half of full display col - aa and col - bb should be place in one line

vuejs2 vue-component vuetify.js vue.js css
1 Answers

I solved it with following code

<v-card class="mobile_product_view">
  <v-row class="m-0  ">
    <v-col cols="6">aa</v-col>
    <v-col cols="6">bb</v-col>
  </v-row>
</v-card>
user_110436760
Related