CODEWITHSUNDEEP
vue.jsvuetify.jsnuxt.js
KAmit
KAmit

Reputation: 337

Vuetify v-flex offset-*(1-12) not working properly

I am using Vuetify 1.5.0 at time of writing this. But when ever I am trying to use offset for any breakpoint on v-flex, its adding offset on that breakpoint and up for Example in this case it is adding offset on md and up as well . Below is my code. Please what am i doing wrong here and how can correct this.

 <v-container class="teal">
    <v-layout row wrap class="red">  
      <v-flex sm12 md8 lg7 offset-md2 class="blue">
          <h1>Hello</h1>
      </v-flex>
      <v-flex sm12 md8 lg5 offset-md2 class="orange">
         <h1>Hello Hi</h1>
      </v-flex>
    </v-layout>
 </v-container>

And is the screenshot taken on lg screen.

enter image description here

as you can see, its wrapping column in new line even though it should not.

Thanks, Amit

Upvotes: 2

Views: 2316

Answers (1)

Alisson Reinaldo Silva
Alisson Reinaldo Silva

Reputation: 10695

The offset-md2 being applied on md and up is expected behaviour if you don't specify any "upper" offset (like offset-lg*). Likewise when you specify sm8 (for small) and don't specify any md* or lg*, the sm8 would be applied for sm and up.

If you want to ignore the offsets on a large screen, you could use offset-lg0, like so:

<v-container class="teal">
    <v-layout row wrap class="red">  
      <v-flex sm12 md8 lg7 offset-md2 offset-lg0 class="blue">
          <h1>Hello</h1>
      </v-flex>
      <v-flex sm12 md8 lg5 offset-md2 offset-lg0 class="orange">
         <h1>Hello Hi</h1>
      </v-flex>
    </v-layout>
 </v-container>

Upvotes: 2

Related Questions