How to change font-size of one section in materialize css?

Question

I'm trying to fit in one page section large amount of text. I use materialize css framework on my website, but I don't know how to change the font-size in this one section.

Here is my section:

#submissions {
  font-size: 10px !important;
}

<section id="submissions" class="white">
  <div class="row">
    <div class="col s12">
      <div class="section">
        <br/><br/>
        <h4 class="text-grey center-align">Submissions</h4>
        <div class="divider"></div>
        <div class="col s6">
          <!-- And here is a lot of content that I want to contain -->
          test test  test test  test test  test test  test test  test test 
        </div>
      </div>
    </div>
  </div>
</section>

To do this I'm trying to use styles.css something like this:

#submissions {
    font-size: 10px !important;
}

Can anyone can advise me something?

Answer 1

materializecss doesn't have any native support for changing font-size so you are going to have to either add a separate id or class to hook your css.

in case you only want to change the font-size of the contained text (add #csshook to your stylesheet):

<div class="col s6" id="csshook">
       <!-- And here is a lot of content that I want to contain -->
       test test  test test  test test  test test  test test  test test 
</div>

in case you want to do both headers and text (add .csshook to your stylesheet):

h4 class="text-grey center-align csshook">Submissions</h4>
<div class="divider"></div>
   <div class="col s6 csshook">
      <!-- And here is a lot of content that I want to contain -->
      test test  test test  test test  test test  test test  test test 
   </div>

depending on which result you prefer use the id or class to change the font-size.

also make sure you initialize your stylesheet AFTER the materializecss stylesheet in your page.