0👍
Do we need to set all vuetify breakpoints?
You don’t need to set all breakpoints. As breakpoint system done with the mobile-first approach – you can set just 1 smaller breakpoint, sm="6" in your example. It will take 6 columns on all screens equal or higher than sm (sm + md + lg + xl), if no override is presented on bigger screens. So if you’ll add lg="8" it will take 6 columns on sm + md and 8 columns on lg and xl. Source: SM - Changes the number of columns on small and greater breakpoints, Vuetify docs
keep mx-auto in xlOnly
You can do it with mx-xl-auto – red it as {property}{direction}-{breakpoint}-{size}. Vuetify docs
on an extra large monitor the v-col takes 6 columns when it should be much smaller
There is no reason for the column to be much smaller, mx-auto sets main axis (horizontal in your case) margins to auto, so it’s centering the col. It’s not affecting width in any way. You can try to add xl="auto", it should let block take only space it needs. If it will not look properly – just set the desired amount of columns (example: xl="4")