Bulma: How to do 'is-fullwidth' on mobile only?

Created on 22 Apr 2017  路  2Comments  路  Source: jgthms/bulma



Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [0.4.0]

Description

I'd like to use is-fullwidth on some tabs but only for mobile. There are only 3 small tabs and on desktop is-fullwidth spaces them too far apart. On mobile they feel a lot nicer evenly spaced.

So my question is how do I do something like is-fullwidth-mobile?

Most helpful comment

@media screen and (max-width: 768px), print {
.button.is-fullwidth-mobile {
display: flex;
width: 100%;
}
}

All 2 comments

You can put flex-grow: 1 on .tabs li but only on mobile with your own media query.

@media screen and (max-width: 768px), print {
.button.is-fullwidth-mobile {
display: flex;
width: 100%;
}
}

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dotMastaz picture dotMastaz  路  3Comments

choonggg picture choonggg  路  3Comments

Wikiki picture Wikiki  路  3Comments

Cosbgn picture Cosbgn  路  3Comments

Yard8 picture Yard8  路  3Comments