diff --git a/mockup/chatbox.html b/mockup/chatbox.html
index 052dc92c1..2ebbfcfdb 100644
--- a/mockup/chatbox.html
+++ b/mockup/chatbox.html
@@ -23,7 +23,7 @@
             <div class="chatbox col-xl-10 col-md-9" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
                 <div class="flyout box-flyout">
                     <div class="chat-head chat-head-chatbox row no-gutters">
-                        <div class="col-9">
+                        <div class="col">
                             <div class="row no-gutters">
                                 <div class="col-auto">
                                     <img alt="User Avatar"
diff --git a/src/templates/chatbox_head.html b/src/templates/chatbox_head.html
index 0c7ccdddc..b89a405cc 100644
--- a/src/templates/chatbox_head.html
+++ b/src/templates/chatbox_head.html
@@ -1,5 +1,5 @@
 <div class="chat-head chat-head-chatbox row no-gutters">
-    <div class="col-9">
+    <div class="col">
         <div class="row no-gutters">
             {[ if (o.show_avatar) { ]}
             <div class="col-auto">
@@ -21,8 +21,10 @@
             </div>
         </div>
     </div>
-    <div class="col-3">
-        <a class="chatbox-btn close-chatbox-button fa fa-close" title={{{o.info_close}}}></a>
-        <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
+    <div class="col-sm-3 col-lg-2">
+        <div class="chatbox-buttons row no-gutters">
+            <a class="chatbox-btn close-chatbox-button fa fa-close" title={{{o.info_close}}}></a>
+            <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
+        </div>
     </div>
 </div>