How to change the size of a modal materializecss

Question

sorry if the question is very simple but I'm new using materializeCss

As I can increase the height and width of a modal materializecss ??

Solution 1

In order to set the height and width of the MaterializeCSS Modal you need to edit the CSS of

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

See more explanation as written by pihyper here: https://stackoverflow.com/a/34580086/3133641

Solution 2

to remove vertical height only, add this in modal class. just make sure this definition does not get overwrite (avoid using !important and use specificity instead).

.modal { max-height: 100%; overflow: visible}

Solution 3

I believe the accepted offer is not the best. Use the chrome developer tools or just add the specific modal ID. You may have more than one

div#modal5 {
width: 50%
}