Force a column to take full width within a specific window width range

Question

I'm using the MaterializeCSS framework and currently have the following structure with 3 content columns inside a row:

<div class="container">
<div class="section">
    <div class="row">
        <div class="col s12 m4"> <!-- 1st column -->
            <div class="icon-block z-depth-2">
                <h2 class="center red-text"><i class="mdi-action-description"></i></h2>
                <h5 class="center">Content Title 1</h5>
                <p class="light"> content Text 1 </p>
            </div>
        </div>  <!-- 1st column  end -->

        <div class="col s12 m4"> <!-- 2nd column -->
            <div class="icon-block z-depth-2">
                <h2 class="center red-text"><i class="mdi-action-settings"></i></h2>
                <h5 class="center">Content Title 2</h5>
                <p class="light"> content Text 2 </p>
            </div>
        </div>  <!-- 2nd column end -->

        <div class="col s12 m4"> <!-- 3rd column -->
            <div class="icon-block z-depth-2">
                 <h2 class="center red-text"><i class="mdi-action-help"></i></h2>
                <h5 class="center">Content Title 3</h5>
                <p class="light"> content Text 3 </p>
            </div>
        </div>  <!-- 3rd column end -->
    </div>  <!-- row end -->
  </div>  <!-- section end -->
</div> <!-- container end -->

While experimenting around I found out that those columns start to order themselves under each other (vertical layout) on a desktop device when the window width is 587px or less, but I guess those might be (and likely are) some percent values. I was unable to find anything related in the materializecss code by searching for related classes and viewing their attributes.

The question: how can I modify the width from which those columns start to stack vertically?

Answer 1

Just override the min-width attribute. But I would create a custom class and then override it. Below is an example for your current code.

@media only screen and (min-width: 320px) {
  .row .col.m4 {
    width: 33.33333%;
    margin-left: 0;
  }
}

JSfiddle

Answer 2

Materialize provide sass so if you know how to work with it you can easily modify those values.

Take a look at the following snippet at sass/components/_grid.scss file which is responsible for the css of the grid (and therefore also the width of container,col,row,sX, etc. elements):

  .col {
float: left;
@include box-sizing(border-box);
padding: 0 $gutter-width / 2;

$i: 1;
@while $i <= $num-cols {
  $perc: unquote((100 / ($num-cols / $i)) + "%");
  &.s#{$i} {
    width: $perc;
    margin-left: 0;
  }
  $i: $i + 1;
}
$i: 1;
@while $i <= $num-cols {
  $perc: unquote((100 / ($num-cols / $i)) + "%");
  &.offset-s#{$i} {
    margin-left: $perc;
  }
  $i: $i + 1;
}

@media #{$medium-and-up} {

  $i: 1;
  @while $i <= $num-cols {
    $perc: unquote((100 / ($num-cols / $i)) + "%");
    &.m#{$i} {
      width: $perc;
      margin-left: 0;
    }
    $i: $i + 1;
  }
  $i: 1;
  @while $i <= $num-cols {
    $perc: unquote((100 / ($num-cols / $i)) + "%");
    &.offset-m#{$i} {
      margin-left: $perc;
    }
    $i: $i + 1;
  }

}

@media #{$large-and-up} {

  $i: 1;
  @while $i <= $num-cols {
    $perc: unquote((100 / ($num-cols / $i)) + "%");
    &.l#{$i} {
      width: $perc;
      margin-left: 0;
    }
    $i: $i + 1;
  }
  $i: 1;
  @while $i <= $num-cols {
    $perc: unquote((100 / ($num-cols / $i)) + "%");
    &.offset-l#{$i} {
      margin-left: $perc;
    }
    $i: $i + 1;
  }

}

As you can see there are several min-width queries and the related variables are being set at _variable.scss:

// Media Query Ranges
$small-screen-up: 601px !default;
$medium-screen-up: 993px !default;
$large-screen-up: 1201px !default;
$small-screen: 600px !default;
$medium-screen: 992px !default;
$large-screen: 1200px !default;

You can simply change the values according to your desire and "compile" it to css.