pop up image is too small

Hello,
i installed an Event component, but image pop up is too small
They suggest these code but they won't work :
div.modal {
left: auto;
width: 80%;
}

.modal-body {
max-height: 600px;
}

Using Protostar, pop up image is properly displayed:
3soterik.com/dev/index.php/agenda/evenem...y?template=protostar

Thank you for your help
Best regards
patrice

 

Hello,

I don't see you included the suggested code. Please include it and enlarge the max-height value. If it still doesn't work, please copy all the CSS code from the Protostar template that's related to modals. It's in Protostar file template.css and all classes start with .modal

You can copy it in the custom.css file of our template.

Regards,
Milos

Hello,
ok, i copied part of Protostar CSS, it works fine, hope for long time.

</style>

.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop,
.modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
}
.modal-header .close {
margin-top: 2px;
}
.modal-header h3 {
margin: 0;
line-height: 30px;
}
.modal-body {
width: 98%;
position: relative;
max-height: 600px;
padding: 1%;
}
.modal-body iframe {
width: 80%;
max-height: 600px;
border: 0 !important;
}
.modal-form {
margin-bottom: 0;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 1px 0 #fff;
-moz-box-shadow: inset 0 1px 0 #fff;
box-shadow: inset 0 1px 0 #fff;
*zoom: 1;
}
.modal-footer:before,
.modal-footer:after {
display: table;
content: "";
line-height: 0;
}
.modal-footer:after {
clear: both;
}
.modal-footer .btn + .btn {
margin-left: 5px;
margin-bottom: 0;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
div.modal {
position: fixed;
top: 5%;
left: 50%;
z-index: 1050;
width: 80%;
margin-left: -40%;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,0.3);
*border: 1px solid #999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0,0,0,0.3);
-moz-box-shadow: 0 3px 7px rgba(0,0,0,0.3);
box-shadow: 0 3px 7px rgba(0,0,0,0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
outline: none;
}
div.modal.fade {
-webkit-transition: opacity .3s linear, top .3s ease-out;
-moz-transition: opacity .3s linear, top .3s ease-out;
-o-transition: opacity .3s linear, top .3s ease-out;
transition: opacity .3s linear, top .3s ease-out;
top: -25%;
}
div.modal.fade.in {
top: 5%;
}
.modal-batch {
overflow-y: visible;
}
.modal-body[class^="jviewport-height"],
.modal-body[class*="jviewport-height"] {
max-height: none;
}

thank you
best regards
patrice