css - Overriding bootstrap rules -
i load css in order
<link href="bootstrap.min.css" rel="stylesheet"> <link href="print.css" media="print" rel="stylesheet">
from bootstrap.css:
@media (min-width: 768px) { .modal-dialog { width: 600px; } }
from print.css:
.modal-dialog { width: 100% !important; }
but still in print preview width 600px!
everything else overridable, paddings etc not width of div.
the bootstrap css media query, more specific print css wrote. specific media query styles elements fit tablet or larger screen - screen size larger 768px. because parent element bootstrap modal doesn't have explicit width set, setting print css width 100% you're telling block element use default behavior, take full width of container. width explicitly set 600px in bootstrap css, that's you'll need override. in general, setting width: 100% block elements redundant, since that's default behavior. read more css 100% widths here.
you can either write own media query override bootstrap default, or can set fixed width in pixels/ems whatever.
so, like:
.modal-dialog { max-width: 500px; /* or whatever width */ }
or:
@media (min-width: 768px) { .modal-dialog { width: 500px !important; } }
Comments
Post a Comment