Menu
I have a title:
<v-card-text style="font-size:5em"> Some Heading Here </v-card-text> I would like to set font size to 3em when the view is XS. Right now I duplicated it as follows:
<v-card-text hidden-xs-only style="font-size:5em"> Some Heading Here </v-card-text> <v-card-text visible-xs-only style="font-size:3em"> Some Heading Here </v-card-text> However I would like to avoid this duplication and solve the issue with CSS alone, but without having to write my own @media queries in the local .vue file. Is that possible?
Alternatively, I'm ok with using predefined classes instead of specifying font size directly or even different elements completely, e.g. something like <h3> when it's XS but <h2> on other viewports.
723
To change the default font in Vuetify, we can set the font-family CSS property in the global styles. to set the font-family value to $font-family , which is set to 'Ubuntu' . Now our Vuetify app will use Ubuntu as the default font.
You can use text-wrap / text-no-wrap class. Show activity on this post. The solution for my scenario was adding word-break: break-word; to my class. The built in classnames did not do what I needed.
Vuetify. js uses the Material Design spec Roboto Font. Each heading size also has a corresponding helper class to style other elements the same.
Breakpoint conditionalsThese conditional values enable responsive functionality to Vuetify features that don't support responsive by default or at all. In the next section we customize the default breakpoint values used in both JavaScript and CSS.
You can apply class based on viewport
:class="{'subheading': $vuetify.breakpoint.xs}" If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
