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.

Answer 2

You are using "id" and "class" to identify element which isn't correct.

Try as below.

<section id="submissions">

Answer 3

If you want both text in large size just add same class in <section class="something"> and <div class="col s6 domething">

 .submissions { font-size: 25px !important; }

 <section class="white submissions"> <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 submissions"> <!-- 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>

or

Try two diff classes..

 .submissions { font-size: 25px !important; } .submis { font-size: 18px !important; }

 <section class="white submissions"> <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 submis"> <!-- 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>

Answer 4

The default stylesheet that materialize serves can be customised to your hearts content with Sass. (You should be using Sass anyway becasue it's awesome ).

Download the Sass version , and inside you'll find a scss file for each component. In _typography.scss the global font size is set at the start:

html{
  line-height: 1.5;

  @media only screen and (min-width: 0) {
    font-size: 14px;
  }

  @media only screen and (min-width: $medium-screen) {
    font-size: 14.5px;
  }

  @media only screen and (min-width: $large-screen) {
    font-size: 15px;
  }

  font-family: $font-stack;
  font-weight: normal;
  color: $off-black;
}

You can see here that we start at 14px and move up to 15px responsively. If you change this and save, the sass will automatically re-compile a materialize.css with the updated values. Note if you want to change the global settings for header tags, you can do so in _variables.scss:

$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
$off-black: rgba(0, 0, 0, 0.87) !default;
// Header Styles
$h1-fontsize: 4.2rem !default;
$h2-fontsize: 3.56rem !default;
$h3-fontsize: 2.92rem !default;
$h4-fontsize: 2.28rem !default;
$h5-fontsize: 1.64rem !default;
$h6-fontsize: 1.15rem !default;

Lastly, it's not good praqctice to have text floating loose in a div. I would wrap in ap tag:

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

And actually lastly, you can always override the base font size in your css file like this:

body {
    font-size: 16px;
}