Change font size in Vuetify based on viewport?

css vue.js viewport vuetify.js
ierdna picture ierdna · Aug 30, 2018 · Viewed 20.1k times · Source

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.

Answer

Igor Kokotko picture Igor Kokotko · Nov 25, 2018

You can apply class based on viewport

:class="{'subheading': $vuetify.breakpoint.xs}"

Related questions

Vue.js toggle class on click

How does toggle a class in vue.js? I have the following: <th class="initial " v-on="click: myFilter"> <span class="wkday">M</span> </th> new Vue({ el: '#my-container', data: {}, methods: { myFilter: …

Read More
Vue.js data-bind style backgroundImage not working

I'm trying to bind the src of an image in an element, but it doesn't seem to work. I'm getting an "Invalid expression. Generated function body: { backgroundImage:{ url(image) }". The documentation says to use either 'Kebab-case' or 'camel-case'. <div …

Read More
Center content vertically on Vuetify

Is there a way to center content vertically in Vuetify? With the text-xs-center helper class, the content gets centered horizontally only: <v-container grid-list-md text-xs-center> <v-layout row wrap> <v-flex xs12> Hello </v-flex> </…

Read More