Search code examples
materialize

Is there a way to reduce the sentence spacing?

I'm using materialize css to design a website. I am currently doing a pop-up modal but there seems to be some issue with the spacing as the sentences are spaced too far apart:enter image description here I would like it to look something like this: enter image description here I followed materialize's documentation code exactly and I should be seeing a normal paragraph where the sentences are not spaced so far apart. I'm not too sure as to where the issue is. Here is my code for the modal:

          <div id="login-modal" class="modal black-text center">
            <div class="modal-content">
              <h4>Welcome Back.</h4>
              <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s, when an unknown printer took a galley
                of type and scrambled it to make a type specimen book. It has
                survived not only five centuries, but also the leap into
                electronic typesetting, remaining essentially unchanged. It was
                popularised in the 1960s with the release of Letraset sheets
                containing Lorem Ipsum passages, and more recently with desktop
                publishing software like Aldus PageMaker including versions of
                Lorem Ipsum.
              </p>
            </div>
            <div class="modal-footer">
              <a href="#!" class="modal-close waves-effect waves-green btn-flat"
                >Agree</a
              >
            </div>
          </div>
Solution

  • This is happening because you have given more line-height to <p> tag. Keep the line-height: 1.5 of <p> tage which is by default given by Materialize CSS.