Is it possible to make the materialize.css modal larger and remove the vertical scroll bar?

Question

I just created buttons that pops up a modal once clicked and each button has a modal that shows a different exercise gif. However the modals are too small and it is preventing the user to see the whole gif, forcing them to scroll down. I want to remove the scroll bar and make the modal bigger so that the user can see the whole gif. Any help would be great, here is my codepen https://codepen.io/anon/pen/gPwved

HTML

 <div id="modal1" class="modal">
    <div class="modal-content">
      <h4></h4>
      <p></p>
    </div>
    <div class="modal-footer">
      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

jQuery- I created 6 on click functions with different id's, this is an example of one of them, see my codepen if you need the whole code

$("#chest").on("click", function() {
       $("h4").html("Bench Press");
        $("p").html("<img id='yo' src='https://45.media.tumblr.com/860edb05e3f8b0bf9b4313a819e87699/tumblr_mi2ud72e931qet17vo1_400.gif'>");
        $("#modal1").openModal("show");
    });

Solution

yes, what you demand can be easily set.

To increase the width of the modal, just adjust the width of the .modal class

.modal { width: 75% !important  }  /* increase the width as per you desire */

To increase the height of the modal, increase the max-height of the .modal class, like so

.modal { width: 75% !important ; max-height: 100% !important } /* increase the width and height! */

To prevent scrolling of the modal, just add the property overflow-y:hidden to the modal class, like so

.modal { width: 75% !important ; max-height: 100% !important ; overflow-y: hidden !important ;}  /* increase the width, height and prevent vertical scroll! However, i don't recommend this, its better to turn on vertical scrolling. */

For more customisability, you should put this as a custom css in a separate css sheet like mycustomstyles.css and load this as the last stylesheet in your header.

Here's the codepen - https://codepen.io/anon/pen/LGxeOa