Restrict responsive design by media query

src/mibew/styles/chats/default/chat.css

@@ -26,7 +26,7 @@ body {
     font-size: 11px;
     font-family: Tahoma, sans-serif;
     line-height: 1;
-    min-width: auto;
+    min-width: 500px;
     background-color: #f1f2f2;
 }
 body.rtl {
@@ -83,7 +83,7 @@ img {
     background: #ffffff url("images/bottombg.gif") scroll repeat-x 0 0;
 }
 #footer {
-    max-width: 100%;
+    width: 400px;
     margin: 0 auto;
     padding-top: 5px;
     padding-bottom: 5px;
@@ -387,7 +387,6 @@ a:hover .image-close-window {
 /* leavy message */
 #message-leave {
     resize: none;
-    width: 100%;
 }
 
 /* error page (error.tpl) */
@@ -561,9 +560,21 @@ ul li {
     display: inline-block;
 }
 
-.username {
-    width: 100%;
-}
-#logo img {
-    max-width: 100%;
+/* responsive design for mobile devices */
+@media only screen and (max-width: 500px) {
+    body {
+        min-width: auto;
+    }
+    #footer {
+        max-width: 100%;
+    }
+    #message-leave {
+        width: 100%;
+    }
+    .username {
+        width: 100%;
+    }
+    #logo img {
+        max-width: 100%;
+    }
 }

src/mibew/styles/chats/default/iframe.css

@@ -21,8 +21,6 @@ div.mibew-chat-wrapper {
     position: fixed !important;
     bottom: 5px !important;
     right: 5px !important;
-    -webkit-overflow-scrolling: touch !important;
-    overflow-y: scroll !important;
 }
 
 iframe.mibew-chat-frame {
@@ -75,3 +73,11 @@ div.mibew-chat-frame-toggle-off {
     bottom: 5px !important;
     background: #ffffff url("images/default-logo-short.png") scroll no-repeat 4px 5px;
 }
+
+/* responsive design for mobile devices */
+@media only screen and (max-width: 500px) {
+    div.mibew-chat-wrapper {
+        -webkit-overflow-scrolling: touch !important;
+        overflow-y: scroll !important;
+    }
+}