Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Spacing Between Rows with Materialize CSS

Tags:

materialize

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

like image 946
Crash Override Avatar asked May 10 '15 20:05

Crash Override


1 Answers

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.

like image 170
Crash Override Avatar answered Sep 19 '22 07:09

Crash Override