diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/public/ImagePreviewer.css b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/public/ImagePreviewer.css index 5c44d49..3547dba 100644 --- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/public/ImagePreviewer.css +++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/public/ImagePreviewer.css @@ -1,22 +1,35 @@ @media screen and (min-width: 1024px) { .modal-custom { - width: 950px !important; - margin-left: -480px !important; + width: 90% !important; + margin-left: -45% !important; } .modal-body-custom { - height: 400px !important; + height: 700px !important; + } + .modal-header-custom>.close { + font-size: 40px; } } @media screen and (min-width: 800px) and (max-width: 1024px) { + .modal-custom { + width: 85% !important; + margin-left: -42% !important; + } .modal-body-custom { - height: 350px !important; + height: 600px !important; } } -@media screen and (min-width: 300px) and (max-width: 800px) { +@media screen and (min-width: 600px) and (max-width: 800px) { .modal-body-custom { - height: 280px !important; + height: 500px !important; + } +} + +@media screen and (min-width: 300px) and (max-width: 600px) { + .modal-body-custom { + height: 300px !important; } } @@ -27,12 +40,13 @@ .modal-body-custom { background: black; overflow-y: hidden !important; + max-height: 100% !important; } .modal-header-custom { background: black; border-bottom: black !important; - padding: 5px 5px 5px 5px !important; + padding: 5px 5px 5px 15px !important; } .modal-header-custom>.close { @@ -53,11 +67,11 @@ .image-container { height: 90%; width: 100%; - margin-bottom: 10px; + margin-bottom: 2%; } .command-container { - height: 5%; + height: 3%; width: 100%; vertical-align: baseline; } @@ -72,7 +86,6 @@ -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Safari */ max-height: 100%; - max-width: 100%; width: auto; }