Make invitations to chat responsive

This commit is contained in:
Fedor A. Fetisov 2018-01-27 00:57:10 +03:00
parent 20d97e5bce
commit c62a98b22a
2 changed files with 28 additions and 4 deletions

View File

@ -506,7 +506,6 @@ ul li {
#invitation-messages-region { #invitation-messages-region {
height: 150px; height: 150px;
min-height: 150px; min-height: 150px;
width: 388px;
overflow-y: auto; overflow-y: auto;
padding: 0; padding: 0;
font-weight: normal; font-weight: normal;
@ -576,11 +575,17 @@ ul li {
#logo img { #logo img {
max-width: 100%; max-width: 100%;
} }
#invitation-messages-region {
max-width: 100%;
}
} }
/* additional trick for desktops */ /* additional tricks for desktops */
@media (min-width: 501px) { @media (min-width: 501px) {
#footer { #footer {
width: 400px; width: 400px;
} }
#invitation-messages-region {
width: 388px;
}
} }

View File

@ -36,7 +36,6 @@
position: fixed !important; position: fixed !important;
bottom: 5px !important; bottom: 5px !important;
right: 5px !important; right: 5px !important;
width: 400px !important;
z-index: 100 !important; z-index: 100 !important;
border-radius: 10px !important; border-radius: 10px !important;
-webkit-border-radius: 10px !important; -webkit-border-radius: 10px !important;
@ -97,7 +96,6 @@
max-width: 100px !important; max-width: 100px !important;
} }
#mibew-invitation-frame { #mibew-invitation-frame {
width: 388px !important;
height: 150px !important; height: 150px !important;
overflow: hidden !important; overflow: hidden !important;
border: 1px solid #bbc4c4 !important; border: 1px solid #bbc4c4 !important;
@ -140,3 +138,24 @@
background: -ms-linear-gradient(#e9f6fc, #c6e5f6) !important; background: -ms-linear-gradient(#e9f6fc, #c6e5f6) !important;
background: linear-gradient(#e9f6fc, #c6e5f6) !important; background: linear-gradient(#e9f6fc, #c6e5f6) !important;
} }
/* responsive design for mobile devices */
@media only screen and (max-width: 500px) {
#mibew-invitation-popup {
max-width: 100% !important;
}
#mibew-invitation-frame {
max-width: 100% !important;
}
}
/* additional trick for desktops */
@media (min-width: 501px) {
#mibew-invitation-popup {
width: 400px !important;
}
#mibew-invitation-frame {
width: 388px !important;
}
}