Nucleus framework in Antimatter: how to show two columns in mobile?

Archive
1

I notice that the nucleus grid always breaks down to one column for mobile. How would I go about forcing certain grids to break down into two, or more, columns on mobile? I’ve gotten around it using a basic table which looks OK as far as I can tell, but maybe there’s a better way to do it.

Is there an extended nucleus grid classes css file out there that adds some of this kind of stuff?

2

That would seem to be controlled by /user/themes/antimatter/scss/nucleus/_flex.scss, which already has additional size classes for tablets: .size-tablet-1-2, .size-tablet-1-3 and so on.

Using scss, you could add classes with custom column counts for mobile like this (assuming here that 6 is the maximum amount of columns you would want to use on mobile):

— css
body {
@include breakpoint(mobile-only) {
.size-mobile-1-2 {
@include flex(0 percentage(1/2));
}
.size-mobile-1-3 {
@include flex(0 percentage(1/3));
}
.size-mobile-1-4 {
@include flex(0 percentage(1/4));
}
.size-mobile-1-5 {
@include flex(0 percentage(1/5));
}
.size-mobile-1-6 {
@include flex(0 percentage(1/6));
}
}
}

3

In case you’re not using scss (which I highly recommend for reasons obvious to anyone comparing the above and below code) and just want the compiled css:

— css
@media only all and (max-width: 47.938em) {
body .size-mobile-1-2 {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
-webkit-flex: 0 50%;
-moz-flex: 0 50%;
-ms-flex: 0 50%;
flex: 0 50%; }
body .size-mobile-1-3 {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
-webkit-flex: 0 33.33333%;
-moz-flex: 0 33.33333%;
-ms-flex: 0 33.33333%;
flex: 0 33.33333%; }
body .size-mobile-1-4 {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
-webkit-flex: 0 25%;
-moz-flex: 0 25%;
-ms-flex: 0 25%;
flex: 0 25%; }
body .size-mobile-1-5 {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
-webkit-flex: 0 20%;
-moz-flex: 0 20%;
-ms-flex: 0 20%;
flex: 0 20%; }
body .size-mobile-1-6 {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
-webkit-flex: 0 16.66667%;
-moz-flex: 0 16.66667%;
-ms-flex: 0 16.66667%;
flex: 0 16.66667%; } }

4

Thanks for the info. Yeah, I’m doing my edits in the scss files which is making things easier. I’ll do some experimenting.