Is it possible to increase the size of materialize.css and remove the vertical scrollbar?

Question

I just created buttons that pull out a modal click, and each button has a modal that shows a different gif exercise. However, the modalities are too small, and this prevents the user from seeing the entire 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 code 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 identifiers, this is an example of one of them, see my code if you need all the 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"); }); 

Answer 1

yes, what you require can be easily installed.

To increase the width of a modality, simply adjust the width of the .modal class

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

To increase the height of the modality, increase the maximum height of the .modal class, for example

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

To prevent the modality from scrolling, simply add the overflow-y: hidden property to the modal class, e.g.

 .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 customization, you should put this as custom css in a separate css sheet, such as mycustomstyles.css, and load it as the last stylesheet in your header.

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