Spacing Between Rows with Materialize CSS

materialize
Crash Override picture Crash Override · May 10, 2015 · Viewed 33k times · Source

Using MaterializeCSS, how can I adjust/remove the vertical spacing between rows?

Example code:

<div class="row">
  <div class="col s12" style="text-align: center;">
    foobar
  </div>
</div>
<div class="row">
  <div class="col s12" style="text-align: center;">
    12345
  </div>
</div>

unwanted space with MaterializeCSS

Answer

Crash Override picture Crash Override · May 11, 2015

I figured it out. Put each col within a single row will eliminate the vertical spacing.

<div class="row">
  <div class="col s12" style="text-align: center;">
    foobar
  </div>
  <div class="col s12" style="text-align: center;">
    12345
  </div>
</div>

It is confusing but it works. Conceptually, I would think that a "row" is like a table row, forcing everything inside it to be on a single row regardless of size, but this does work since each col has s12 (full width) size. Hope this answer helps someone else.

Related questions

Materialize CSS - Select Doesn't Seem to Render

I am currently working with materialize CSS and it seems I've gotten snagged with the select fields. I'm using the example provided from their site but unfortunately it it's rendering in the view whatsoever. I was wondering if someone else …

Read More
How to host material icons offline?

My apologies if this is a very simple question, but how do you use google material icons without a <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> ? I would like my app to be …

Read More
How to dynamically modify <select> in materialize css framework

I just started using the materialize css framework. Now, materialize converts any select tag into a collection of ul and li elements. Before, using JQuery, I was able to do this: var $selectDropdown = $("#dropdownid"); $selectDropdown.empty(); $selectDropdown.html(' '); …

Read More