12

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

4 Answers 4

20

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.

4
  • 2
    Thank you for posting the solution yourself. Btw, instead of adding inline CSS for text-align: center, use the CSS helper class "center-align". May 29, 2015 at 23:45
  • 1
    Thanks for the top on using the "center-align" class. Yeah the whole "row" idea was confusing for me, coming from using html table tags for many years, but it finally makes sense to me. Materialize figures out which col's to put next to each other or on separate rows based on the browser window size. It makes it easier to produce a single page that is both mobile and desktop friendly. A "row" is really just a section, that can have about as many col's as you want. Jun 1, 2015 at 21:45
  • 6
    FYI, I found materializecss has a way to make the space between <div class="row"> tags go away. Do a <div class="row" style="margin-bottom: 0px;"> Jun 7, 2015 at 21:38
  • can't put the cols in single row since i have even/odd row styling. The other solutions with setting the margin-bottom to 0px did not work.
    – mobibob
    Sep 15, 2020 at 23:30
2

I did this to make fast space with clear and margin if i need to.

<div class="clear-10"></div>

.clear, .clear-10, .clear-15 {
  clear: both;
  height: 0; overflow: hidden; /* Précaution pour IE 7 */
}
.clear-10 {
  margin-bottom: 10px
}
.clear-15 {
  margin-bottom: 15px
}
2

Use These Methods:

.row .col{
    padding: 0 !important;
}

Then the problem with unwanted space will be go away. Next you can add any other style to your div

1
  • May I suggest you add margin: 0 !important; to this as well? Otherwise the contents of each column will "float" outside of it.
    – icecub
    Jul 29, 2018 at 7:25
0

I fixed that providing a fixed height to the .cols on the larger screen. If your .col height can be fixed (probably use any other class and fix them or the larger screen or the screen where this problem is caused, which I am sure the medium col is effected the most.).

Here is a snippet which worked for me when there are multiple .col than a 12 grid row can attach to it:

.container {
  padding: 2.4em;
}

.container .row .col.m4 {
  margin-top: 3em;
  height: 42em; //put your required height which fix this by testing.
  width: 33%;
}  


@media screen and (min-width:10px) and (max-width: 640px){
  .container {
    padding: .5em;
  }
  .container .row .col.s12 {
    width: 100%;
    /*height: 45em;*/ We don't need that to be fixed in small devices
  }
}

.container .row {
  margin-top: 1.2em;
}

For your solution, it was simply that you need to put all the .cols in one row, as .row kind of forces the next line. And it is obvious that one row would need to fill it's .row capacity, so it was good fixed by your self.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.