From 5ab35e753f9e4908add2f169fa03096e7939d755 Mon Sep 17 00:00:00 2001
From: ivan deng <guohuadeng@hotmail.com>
Date: Fri, 4 Aug 2023 04:04:20 +0800
Subject: [PATCH] update css

---
 .../static/description/index.html             | 42 ++++-----
 .../static/description/index.html             | 42 ++++-----
 .../static/description/index.html             | 10 +-
 .../static/description/index.html             | 92 +++++++++----------
 app_chatgpt/static/description/index.html     | 40 ++++----
 app_common/static/description/index.html      |  8 +-
 .../static/description/index.html             | 42 ++++-----
 app_hr_superbar/static/description/index.html | 44 ++++-----
 app_hr_ztree/static/description/index.html    | 16 ++--
 .../static/description/index.html             | 76 +++++++--------
 .../static/description/index.html             | 48 +++++-----
 .../static/description/index.html             | 26 +++---
 .../static/description/index.html             | 54 +++++------
 .../static/description/index.html             |  4 +-
 .../static/description/index.html             | 28 +++---
 .../static/description/index.html             | 54 +++++------
 .../static/description/index.html             | 26 +++---
 .../static/description/index.html             | 58 ++++++------
 .../static/description/index.html             | 66 ++++++-------
 .../static/description/index.html             | 16 ++--
 .../static/description/index.html             | 58 ++++++------
 .../static/description/index.html             | 18 ++--
 .../static/description/index.html             | 42 ++++-----
 .../static/description/index.html             | 18 ++--
 .../static/description/index.html             | 42 ++++-----
 .../static/description/index.html             | 66 ++++++-------
 .../static/description/index.html             | 26 +++---
 .../static/description/index.html             | 18 ++--
 .../static/description/index.html             | 16 ++--
 app_stock_ztree/static/description/index.html | 16 ++--
 .../static/description/index.html             | 20 ++--
 .../static/description/index.html             | 10 +-
 .../static/description/index.html             |  6 +-
 .../static/description/index.html             | 58 ++++++------
 .../static/description/index.html             |  6 +-
 35 files changed, 606 insertions(+), 606 deletions(-)

diff --git a/app_account_superbar/static/description/index.html b/app_account_superbar/static/description/index.html
index 7ff5f50b..daff7a66 100644
--- a/app_account_superbar/static/description/index.html
+++ b/app_account_superbar/static/description/index.html
@@ -16,7 +16,7 @@
 <section class="oe_container">
     <div class="oe_row">
         <div class="oe_span12">
-            <img class="oe_demo oe_screenshot" src="banner.png">
+            <img class="oe_demo oe_screenshot img img-fluid" src="banner.png">
         </div>
         <div class="oe_span12 oe_spaced">
             <div class="alert alert-info" style="padding:8px;font-weight: 300; font-size: 20px;">
@@ -83,15 +83,15 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Product by category or type in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="https://apps.odoocdn.com/apps/assets/14.0/app_web_superbar/superbar.gif"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="https://apps.odoocdn.com/apps/assets/14.0/app_web_superbar/superbar.gif"/>
         </div>
     </div>
 </section>
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="product1.jpg">
         </div>
     </div>
@@ -100,15 +100,15 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos3.jpg">
         </div>
     </div>
@@ -116,7 +116,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.jpg">
         </div>
     </div>
@@ -125,7 +125,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.jpg">
         </div>
     </div>
@@ -134,7 +134,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.jpg">
         </div>
     </div>
@@ -143,7 +143,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="contacts1.jpg">
         </div>
     </div>
@@ -170,7 +170,7 @@
                 <h4 class="oe_slogan">Show superbar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use7.jpg">
                 </div>
             </div>
@@ -178,7 +178,7 @@
                 <h4 class="oe_slogan">Show superbar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use8.jpg">
                 </div>
             </div>
@@ -186,7 +186,7 @@
                 <h4 class="oe_slogan">Show superbar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use9.jpg">
                 </div>
             </div>
@@ -194,7 +194,7 @@
                 <h4 class="oe_slogan">Show superbar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="usea.jpg">
                 </div>
             </div>
@@ -202,7 +202,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -210,7 +210,7 @@
                 <h4 class="oe_slogan">Click checkbox to set whether to show child nodes data.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use2.jpg">
                 </div>
             </div>
@@ -218,7 +218,7 @@
                 <h4 class="oe_slogan">Press Ctrl(Windows) / Cmd(Mac) to Select Multi Nodes</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use3.jpg">
                 </div>
             </div>
@@ -226,7 +226,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -234,7 +234,7 @@
                 <h4 class="oe_slogan">Set super bar position, left or right.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use5.jpg">
                 </div>
             </div>
@@ -242,7 +242,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <ul class="oe_spaced" style="padding:8px;font-weight: 300; font-size: 20px;">
diff --git a/app_account_superbar_chinese/static/description/index.html b/app_account_superbar_chinese/static/description/index.html
index 7ff5f50b..daff7a66 100644
--- a/app_account_superbar_chinese/static/description/index.html
+++ b/app_account_superbar_chinese/static/description/index.html
@@ -16,7 +16,7 @@
 <section class="oe_container">
     <div class="oe_row">
         <div class="oe_span12">
-            <img class="oe_demo oe_screenshot" src="banner.png">
+            <img class="oe_demo oe_screenshot img img-fluid" src="banner.png">
         </div>
         <div class="oe_span12 oe_spaced">
             <div class="alert alert-info" style="padding:8px;font-weight: 300; font-size: 20px;">
@@ -83,15 +83,15 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Product by category or type in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="https://apps.odoocdn.com/apps/assets/14.0/app_web_superbar/superbar.gif"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="https://apps.odoocdn.com/apps/assets/14.0/app_web_superbar/superbar.gif"/>
         </div>
     </div>
 </section>
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="product1.jpg">
         </div>
     </div>
@@ -100,15 +100,15 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos3.jpg">
         </div>
     </div>
@@ -116,7 +116,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.jpg">
         </div>
     </div>
@@ -125,7 +125,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.jpg">
         </div>
     </div>
@@ -134,7 +134,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.jpg">
         </div>
     </div>
@@ -143,7 +143,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="contacts1.jpg">
         </div>
     </div>
@@ -170,7 +170,7 @@
                 <h4 class="oe_slogan">Show superbar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use7.jpg">
                 </div>
             </div>
@@ -178,7 +178,7 @@
                 <h4 class="oe_slogan">Show superbar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use8.jpg">
                 </div>
             </div>
@@ -186,7 +186,7 @@
                 <h4 class="oe_slogan">Show superbar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use9.jpg">
                 </div>
             </div>
@@ -194,7 +194,7 @@
                 <h4 class="oe_slogan">Show superbar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="usea.jpg">
                 </div>
             </div>
@@ -202,7 +202,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -210,7 +210,7 @@
                 <h4 class="oe_slogan">Click checkbox to set whether to show child nodes data.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use2.jpg">
                 </div>
             </div>
@@ -218,7 +218,7 @@
                 <h4 class="oe_slogan">Press Ctrl(Windows) / Cmd(Mac) to Select Multi Nodes</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use3.jpg">
                 </div>
             </div>
@@ -226,7 +226,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -234,7 +234,7 @@
                 <h4 class="oe_slogan">Set super bar position, left or right.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use5.jpg">
                 </div>
             </div>
@@ -242,7 +242,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <ul class="oe_spaced" style="padding:8px;font-weight: 300; font-size: 20px;">
diff --git a/app_base_chinese/static/description/index.html b/app_base_chinese/static/description/index.html
index 3bae1a5b..c04f8516 100644
--- a/app_base_chinese/static/description/index.html
+++ b/app_base_chinese/static/description/index.html
@@ -6,7 +6,7 @@
             <div class="oe_row">
                 <h3>Lastest update: v13.20.04.11</h3>
                 <div class="oe_span12">
-                    <img class="oe_demo oe_screenshot" src="banner.jpg">
+                    <img class="oe_demo oe_screenshot img img-fluid" src="banner.jpg">
                 </div>
                 <div class="oe_span12 oe_spaced">
                     <div class="alert alert-info" style="padding:8px;font-weight: 300; font-size: 20px;">
@@ -32,7 +32,7 @@
                     </div>
                 </div>
                 <div class="oe_span12">
-                    <img class="oe_demo oe_screenshot" src="cnreadme.jpg">
+                    <img class="oe_demo oe_screenshot img img-fluid" src="cnreadme.jpg">
                 </div>
             </div>
         </div>
@@ -42,10 +42,10 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Set Default country, state, timezone, currency.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo1.jpg">
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo2.jpg">
         </div>
     </div>
@@ -54,7 +54,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Fix Category Display not in english bug.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo3.jpg">
         </div>
     </div>
diff --git a/app_base_superbar/static/description/index.html b/app_base_superbar/static/description/index.html
index d60ab3da..4ab04c41 100644
--- a/app_base_superbar/static/description/index.html
+++ b/app_base_superbar/static/description/index.html
@@ -7,34 +7,34 @@
         </a>
         </h1>
         <h4 class="oe_slogan">Menu admin by menu category</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="base1.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="base1.jpg"/>
         </div>
         <h4 class="oe_slogan">Actions admin by type and model</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="base2.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="base2.jpg"/>
         </div>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="base4.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="base4.jpg"/>
         </div>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="base5.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="base5.jpg"/>
         </div>
         <h4 class="oe_slogan">Report admin by type and model</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="base3.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="base3.jpg"/>
         </div>
         <h4 class="oe_slogan">Views admin by type and model</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="base6.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="base6.jpg"/>
         </div>
         <h4 class="oe_slogan">Model Constraints admin by module and model</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="base8.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="base8.jpg"/>
         </div>
         <h4 class="oe_slogan">Attachment admin by type and creator</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="base9.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="base9.jpg"/>
         </div>
         <h2>The following is the feather of extra paid Apps, which support this apps.</h2>
     </div>
@@ -48,7 +48,7 @@
 <section class="oe_container">
     <div class="oe_row">
         <div class="oe_demo">
-            <img class="oe_demo oe_screenshot" src="banner.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="banner.gif">
         </div>
         <h3 class="oe_slogan">Advance Search, Advance Filter with Parent Children Tree.</h3>
         <h1 class="text-danger text-center">Buy
@@ -204,8 +204,8 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Product by category or type in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="use.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="use.jpg"/>
         </div>
     </div>
 </section>
@@ -213,7 +213,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="product1.jpg">
         </div>
     </div>
@@ -222,15 +222,15 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos3.jpg">
         </div>
     </div>
@@ -238,7 +238,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in HR employee.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="hr2.gif">
         </div>
     </div>
@@ -247,7 +247,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.jpg">
         </div>
     </div>
@@ -256,7 +256,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.jpg">
         </div>
     </div>
@@ -265,7 +265,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in CRM.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="crm1.jpg">
         </div>
     </div>
@@ -274,7 +274,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.jpg">
         </div>
     </div>
@@ -283,7 +283,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in MRP.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="mrp1.gif">
         </div>
     </div>
@@ -292,7 +292,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in stock.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="stock1.jpg">
         </div>
     </div>
@@ -301,7 +301,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="contacts1.jpg">
         </div>
     </div>
@@ -310,10 +310,10 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Apps Navigator by Category, Module Navigator is ready.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module1.jpg">
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module2.jpg">
         </div>
     </div>
@@ -323,15 +323,15 @@
     <div class="oe_row oe_spaced">
         <h1 class="text-danger text-center">Buy this apps, get Extra bonus apps, App zTree widget, Hierarchy Parent tree in m2o select</h1>
         <h4 class="oe_slogan">Ready for product category Hierarchy Parent tree in m2o select</h4>
-        <div class="oe_screenshot">
+        <div class="oe_screenshot img img-fluid">
             <img src="z_product1.gif">
         </div>
         <h4 class="oe_slogan">Ready for Stock Location Hierarchy Parent tree in m2o select</h4>
-        <div class="oe_screenshot">
+        <div class="oe_screenshot img img-fluid">
             <img src="z_stock1.gif">
         </div>
         <h4 class="oe_slogan">Ready for Hr Department Hierarchy Parent tree in m2o select</h4>
-        <div class="oe_screenshot">
+        <div class="oe_screenshot img img-fluid">
             <img src="z_hr1.gif">
         </div>
     </div>
@@ -358,7 +358,7 @@
                 <h4 class="oe_slogan">Show superbar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use7.jpg">
                 </div>
             </div>
@@ -366,7 +366,7 @@
                 <h4 class="oe_slogan">Show superbar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use8.jpg">
                 </div>
             </div>
@@ -374,7 +374,7 @@
                 <h4 class="oe_slogan">Show superbar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use9.jpg">
                 </div>
             </div>
@@ -382,7 +382,7 @@
                 <h4 class="oe_slogan">Show superbar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="usea.jpg">
                 </div>
             </div>
@@ -390,7 +390,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -398,7 +398,7 @@
                 <h4 class="oe_slogan">Click checkbox to set whether to show child nodes data.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use2.jpg">
                 </div>
             </div>
@@ -406,7 +406,7 @@
                 <h4 class="oe_slogan">Press Ctrl(Windows) / Cmd(Mac) to Select Multi Nodes</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use3.jpg">
                 </div>
             </div>
@@ -414,7 +414,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -422,7 +422,7 @@
                 <h4 class="oe_slogan">Set super bar position, left or right.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use5.jpg">
                 </div>
             </div>
@@ -430,7 +430,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <ul class="oe_spaced" style="padding:8px;font-weight: 300; font-size: 20px;">
diff --git a/app_chatgpt/static/description/index.html b/app_chatgpt/static/description/index.html
index 97a5b422..b6184f4e 100644
--- a/app_chatgpt/static/description/index.html
+++ b/app_chatgpt/static/description/index.html
@@ -9,11 +9,11 @@
                     <div class="row">
                         <img class=""  src="bard.gif">
                         Add google bard support, update chatgpt api</div>
-                    <img class="oe_demo  oe_screenshot" src="demo02.jpg">
+                    <img class="oe_demo  oe_screenshot img img-fluid" src="demo02.jpg">
                 </div>
                 <h3>Lastest update: v16.23.03.16</h3>
                 <div class="oe_span12">
-                    <img class="oe_demo  oe_screenshot"  style="max-height: 100%;" src="banner.png">
+                    <img class="oe_demo  oe_screenshot img img-fluid"  style="max-height: 100%;" src="banner.png">
                 </div>
                 <div class="oe_span12 oe_spaced">
                     <div class="alert alert-info" style="padding:8px;font-weight: 300; font-size: 20px;">
@@ -83,15 +83,15 @@
     <div class="oe_row oe_spaced">
         <h1 class="text-danger text-center">Add more Ai support like google bard, chatgpt 4, baidu china</h1>
         <h4 class="oe_slogan"> Need to navigate to odoo app store to install addons</h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo01.jpg"/>
         </div>
         <h4 class="oe_slogan">Please apply for the bard api first from google</h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo03.jpg"/>
         </div>
         <h4 class="oe_slogan">Setup for your own key</h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo04.jpg"/>
         </div>
     </div>
@@ -101,7 +101,7 @@
     <div class="oe_row oe_spaced">
         <h1 class="text-danger text-center">Easy to use Ai Robot with multi Provider. Easy chat, easy help</h1>
         <h4 class="oe_slogan"> Open Ai for more smart. Microsoft Azure chatgpt for china user.</h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demob.jpg"/>
         </div>
     </div>
@@ -112,11 +112,11 @@
         <h1 class="text-danger text-center">1. Multi ChatGpt openAI robot Connector. Chat and train.</h1>
         <h4 class="oe_slogan"> Goto Setting--> GPT Robot to setup your robot api.  </h4>
         <p> Input your api key, And Select the api model you need to use.</p>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo1.jpg"/>
         </div>
         <p> You can set the Temperature higer for more creative answer.</p>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo2.jpg"/>
         </div>
     </div>
@@ -127,11 +127,11 @@
     <div class="oe_row oe_spaced">
         <h1 class="text-danger text-center">2. Multi Api support, Chatgpt 3.5 Turbo, Chatgpt 3 Davinci, Chatgpt 2 Code Optimized, 'Dall-E Image.</h1>
         <h4 class="oe_slogan"> Choose the model you want to use</h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo2.jpg"/>
         </div>
         <p> You can set the Temperature higer for more creative answer.</p>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo3.jpg"/>
         </div>
     </div>
@@ -144,11 +144,11 @@
             <img  src="demo4.jpg"/>
         </div>
         <h4 class="oe_slogan"> So you can have many user, and many chatgpt robot. This provide you an Ai pool.</h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo5.jpg"/>
         </div>
         <h4 class="oe_slogan"> You can set the blacklist to this chatgpt robot to limit request. Also you can setup Demo time for every normal user..</h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo6.jpg"/>
         </div>
     </div>
@@ -159,7 +159,7 @@
         <h1 class="text-danger text-center">4. White and black List for ChatGpt.</h1>
         <h1 class="text-danger text-center">5. Setup Demo Chat time for every new user.</h1>
         <h4 class="oe_slogan"> You can set the blacklist to this chatgpt robot to limit request. Also you can setup Demo time for every normal user..</h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo6.jpg"/>
         </div>
     </div>
@@ -169,15 +169,15 @@
     <div class="oe_row oe_spaced">
         <h1 class="text-danger text-center">6. Easy Start and Stop ChatGpt..</h1>
         <h4 class="oe_slogan"> You can easy chat with the apt robot with odoo IM</h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo7.jpg"/>
         </div>
         <h4 class="oe_slogan"> You can chat with several robot in the same time</h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo8.jpg"/>
         </div>
         <h4 class="oe_slogan"> If you have more than 1 robot in the group. you can @ the specify robot.</h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo9.jpg"/>
         </div>
     </div>
@@ -189,7 +189,7 @@
         <h1 class="text-danger text-center">7. Evaluation the ai robot to make better response. This training.</h1>
         <h4 class="oe_slogan"> You can Evaluation chatgpt's answer.  Mark as good for good answer. Mark as back for bad answer.</h4>
         <p> With Evaluation, you can make your ai robot more smart.
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo71.jpg"/>
         </div>
     </div>
@@ -199,7 +199,7 @@
     <div class="oe_row oe_spaced">
         <h1 class="text-danger text-center">8. Add api support Connect the Microsoft Azure OpenAI Service.</h1>
         <h4 class="oe_slogan"> Azure openai add. It is for china and other country which no chatgpt service.</h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo81.jpg"/>
         </div>
     </div>
@@ -209,7 +209,7 @@
     <div class="oe_row oe_spaced">
         <h1 class="text-danger text-center">9. Can set Synchronous or Asynchronous mode for Ai response.</h1>
         <h4 class="oe_slogan"> Synchronous(default) mode can get response then ask question again. Asynchronous mode would make you do other thing when waiting for response.</h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="demo91.jpg"/>
         </div>
     </div>
@@ -219,7 +219,7 @@
     <div class="oe_row oe_spaced">
         <h1 class="text-danger text-center">Multi-language Support..</h1>
         <h4 class="oe_slogan"> </h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="cnreadme.jpg"/>
         </div>
     </div>
diff --git a/app_common/static/description/index.html b/app_common/static/description/index.html
index 55135c19..3e8119a8 100644
--- a/app_common/static/description/index.html
+++ b/app_common/static/description/index.html
@@ -6,7 +6,7 @@
             <div class="oe_row">
                 <h3>Lastest update: v15.21.11.30</h3>
                 <div class="oe_span12">
-                    <img class="oe_demo  oe_screenshot"  style="max-height: 100%;" src="banner.png">
+                    <img class="oe_demo  oe_screenshot img img-fluid"  style="max-height: 100%;" src="banner.png">
                 </div>
                 <div class="oe_span12 oe_spaced">
                     <div class="alert alert-info" style="padding:8px;font-weight: 300; font-size: 20px;">
@@ -40,7 +40,7 @@
     <div class="oe_row oe_spaced">
         <h1 class="text-danger text-center">Setup, please run the follow command to install the lib.</h1>
         <h4 class="oe_slogan"> pip install pyyaml ua-parser user-agents </h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src=".jpg"/>
         </div>
     </div>
@@ -51,7 +51,7 @@
     <div class="oe_row oe_spaced">
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan"> </h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src=".jpg"/>
         </div>
     </div>
@@ -61,7 +61,7 @@
     <div class="oe_row oe_spaced">
         <h1 class="text-danger text-center">Multi-language Support..</h1>
         <h4 class="oe_slogan"> </h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src="cnreadme.jpg"/>
         </div>
     </div>
diff --git a/app_contacts_superbar/static/description/index.html b/app_contacts_superbar/static/description/index.html
index 4b1f1b96..70f6ce0c 100644
--- a/app_contacts_superbar/static/description/index.html
+++ b/app_contacts_superbar/static/description/index.html
@@ -16,7 +16,7 @@
 <section class="oe_container">
     <div class="oe_row">
         <div class="oe_span12">
-            <img class="oe_demo oe_screenshot" src="banner.png">
+            <img class="oe_demo oe_screenshot img img-fluid" src="banner.png">
         </div>
         <div class="oe_span12 oe_spaced">
             <div class="alert alert-info" style="padding:8px;font-weight: 300; font-size: 20px;">
@@ -83,15 +83,15 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Product by category or type in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="https://apps.odoocdn.com/apps/assets/14.0/app_web_superbar/superbar.gif"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="https://apps.odoocdn.com/apps/assets/14.0/app_web_superbar/superbar.gif"/>
         </div>
     </div>
 </section>
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="product1.jpg">
         </div>
     </div>
@@ -100,15 +100,15 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos3.jpg">
         </div>
     </div>
@@ -116,7 +116,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.jpg">
         </div>
     </div>
@@ -125,7 +125,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.jpg">
         </div>
     </div>
@@ -134,7 +134,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.jpg">
         </div>
     </div>
@@ -143,7 +143,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="contacts1.jpg">
         </div>
     </div>
@@ -170,7 +170,7 @@
                 <h4 class="oe_slogan">Show superbar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use7.jpg">
                 </div>
             </div>
@@ -178,7 +178,7 @@
                 <h4 class="oe_slogan">Show superbar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use8.jpg">
                 </div>
             </div>
@@ -186,7 +186,7 @@
                 <h4 class="oe_slogan">Show superbar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use9.jpg">
                 </div>
             </div>
@@ -194,7 +194,7 @@
                 <h4 class="oe_slogan">Show superbar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="usea.jpg">
                 </div>
             </div>
@@ -202,7 +202,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -210,7 +210,7 @@
                 <h4 class="oe_slogan">Click checkbox to set whether to show child nodes data.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use2.jpg">
                 </div>
             </div>
@@ -218,7 +218,7 @@
                 <h4 class="oe_slogan">Press Ctrl(Windows) / Cmd(Mac) to Select Multi Nodes</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use3.jpg">
                 </div>
             </div>
@@ -226,7 +226,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -234,7 +234,7 @@
                 <h4 class="oe_slogan">Set super bar position, left or right.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use5.jpg">
                 </div>
             </div>
@@ -242,7 +242,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <ul class="oe_spaced" style="padding:8px;font-weight: 300; font-size: 20px;">
diff --git a/app_hr_superbar/static/description/index.html b/app_hr_superbar/static/description/index.html
index d503234a..535a538b 100644
--- a/app_hr_superbar/static/description/index.html
+++ b/app_hr_superbar/static/description/index.html
@@ -6,7 +6,7 @@
 <section class="oe_container">
     <div class="oe_row">
         <div class="oe_span12">
-            <img class="oe_demo oe_screenshot" src="hr2.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="hr2.gif">
         </div>
         <h1 class="text-center text-warning">!This moduld Do Need extra paid Apps
         <a href="http://www.odoo.com/apps/modules/14.0/app_web_superbar/" target="_blank">
@@ -93,7 +93,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in HR employee.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="hr2.gif">
         </div>
     </div>
@@ -104,8 +104,8 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Product by category or type in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="https://apps.odoocdn.com/apps/assets/14.0/app_web_superbar/superbar.gif"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="https://apps.odoocdn.com/apps/assets/14.0/app_web_superbar/superbar.gif"/>
         </div>
     </div>
 </section>
@@ -113,7 +113,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="product1.jpg">
         </div>
     </div>
@@ -122,15 +122,15 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos3.jpg">
         </div>
     </div>
@@ -138,7 +138,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.jpg">
         </div>
     </div>
@@ -147,7 +147,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.jpg">
         </div>
     </div>
@@ -156,7 +156,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.jpg">
         </div>
     </div>
@@ -165,7 +165,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="contacts1.jpg">
         </div>
     </div>
@@ -192,7 +192,7 @@
                 <h4 class="oe_slogan">Show superbar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use7.jpg">
                 </div>
             </div>
@@ -200,7 +200,7 @@
                 <h4 class="oe_slogan">Show superbar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use8.jpg">
                 </div>
             </div>
@@ -208,7 +208,7 @@
                 <h4 class="oe_slogan">Show superbar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use9.jpg">
                 </div>
             </div>
@@ -216,7 +216,7 @@
                 <h4 class="oe_slogan">Show superbar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="usea.jpg">
                 </div>
             </div>
@@ -224,7 +224,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -232,7 +232,7 @@
                 <h4 class="oe_slogan">Click checkbox to set whether to show child nodes data.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use2.jpg">
                 </div>
             </div>
@@ -240,7 +240,7 @@
                 <h4 class="oe_slogan">Press Ctrl(Windows) / Cmd(Mac) to Select Multi Nodes</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use3.jpg">
                 </div>
             </div>
@@ -248,7 +248,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -256,7 +256,7 @@
                 <h4 class="oe_slogan">Set super bar position, left or right.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use5.jpg">
                 </div>
             </div>
@@ -264,7 +264,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <ul class="oe_spaced" style="padding:8px;font-weight: 300; font-size: 20px;">
diff --git a/app_hr_ztree/static/description/index.html b/app_hr_ztree/static/description/index.html
index 099513de..94edfcf4 100644
--- a/app_hr_ztree/static/description/index.html
+++ b/app_hr_ztree/static/description/index.html
@@ -75,7 +75,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in hr department.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo4.jpg">
         </div>
     </div>
@@ -84,7 +84,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in hr employee.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo5.jpg">
         </div>
     </div>
@@ -93,7 +93,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in product.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo2.jpg">
         </div>
     </div>
@@ -102,7 +102,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo1.jpg">
         </div>
     </div>
@@ -111,7 +111,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in stock location.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo3.jpg">
         </div>
     </div>
@@ -122,7 +122,7 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">(!Need extra module and pay, release soon)Easy to navigator.</h1>
         <h4 class="oe_slogan">Product, employee in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo11.jpg">
         </div>
     </div>
@@ -131,7 +131,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">(!Need extra module and pay, release soon)List view</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo12.jpg">
         </div>
     </div>
@@ -140,7 +140,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Easy to setup just use widget='widget_select'. like this</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="setup1.jpg">
         </div>
         <h1><br/> Use follow param to setup widget:<br/></h1>
diff --git a/app_mail_superbar/static/description/index.html b/app_mail_superbar/static/description/index.html
index 387496c6..77198a9a 100644
--- a/app_mail_superbar/static/description/index.html
+++ b/app_mail_superbar/static/description/index.html
@@ -7,20 +7,20 @@
         </a>
         </h1>
         <h4 class="oe_slogan">Message navigator</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="mail1.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="mail1.jpg"/>
         </div>
         <h4 class="oe_slogan">Mail navigator</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="mail2.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="mail2.jpg"/>
         </div>
         <h4 class="oe_slogan">Channels Partner navigator</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="mail3.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="mail3.jpg"/>
         </div>
         <h4 class="oe_slogan">Mail navigator</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="mail4.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="mail4.jpg"/>
         </div>
         <h2>The following is the feather of extra paid Apps, which support this apps.</h2>
     </div>
@@ -34,7 +34,7 @@
 <section class="oe_container">
     <div class="oe_row">
         <div class="oe_span12">
-            <img class="oe_demo oe_screenshot" src="http://www.odoo.com/apps/modules/14.0/app_web_superbar/superbar.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="http://www.odoo.com/apps/modules/14.0/app_web_superbar/superbar.gif">
         </div>
         <h3 class="oe_slogan">Advance Search, Advance Filter with Parent Children Tree.</h3>
         <h1 class="text-danger text-center">Buy
@@ -190,8 +190,8 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Product by category or type in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="use.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="use.jpg"/>
         </div>
     </div>
 </section>
@@ -199,7 +199,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="product1.jpg">
         </div>
     </div>
@@ -208,15 +208,15 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos3.jpg">
         </div>
     </div>
@@ -224,7 +224,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in HR employee.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="hr2.gif">
         </div>
     </div>
@@ -233,7 +233,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.jpg">
         </div>
     </div>
@@ -242,7 +242,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.jpg">
         </div>
     </div>
@@ -251,7 +251,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in CRM.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="crm1.jpg">
         </div>
     </div>
@@ -260,7 +260,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.jpg">
         </div>
     </div>
@@ -269,7 +269,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in MRP.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="mrp1.gif">
         </div>
     </div>
@@ -278,7 +278,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in stock.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="stock1.jpg">
         </div>
     </div>
@@ -287,7 +287,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="contacts1.jpg">
         </div>
     </div>
@@ -296,10 +296,10 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Apps Navigator by Category, Module Navigator is ready.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module1.jpg">
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module2.jpg">
         </div>
     </div>
@@ -309,15 +309,15 @@
     <div class="oe_row oe_spaced">
         <h1 class="text-danger text-center">Buy this apps, get Extra bonus apps, App zTree widget, Hierarchy Parent tree in m2o select</h1>
         <h4 class="oe_slogan">Ready for product category Hierarchy Parent tree in m2o select</h4>
-        <div class="oe_screenshot">
+        <div class="oe_screenshot img img-fluid">
             <img src="z_product1.gif">
         </div>
         <h4 class="oe_slogan">Ready for Stock Location Hierarchy Parent tree in m2o select</h4>
-        <div class="oe_screenshot">
+        <div class="oe_screenshot img img-fluid">
             <img src="z_stock1.gif">
         </div>
         <h4 class="oe_slogan">Ready for Hr Department Hierarchy Parent tree in m2o select</h4>
-        <div class="oe_screenshot">
+        <div class="oe_screenshot img img-fluid">
             <img src="z_hr1.gif">
         </div>
     </div>
@@ -344,7 +344,7 @@
                 <h4 class="oe_slogan">Show superbar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use7.jpg">
                 </div>
             </div>
@@ -352,7 +352,7 @@
                 <h4 class="oe_slogan">Show superbar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use8.jpg">
                 </div>
             </div>
@@ -360,7 +360,7 @@
                 <h4 class="oe_slogan">Show superbar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use9.jpg">
                 </div>
             </div>
@@ -368,7 +368,7 @@
                 <h4 class="oe_slogan">Show superbar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="usea.jpg">
                 </div>
             </div>
@@ -376,7 +376,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -384,7 +384,7 @@
                 <h4 class="oe_slogan">Click checkbox to set whether to show child nodes data.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use2.jpg">
                 </div>
             </div>
@@ -392,7 +392,7 @@
                 <h4 class="oe_slogan">Press Ctrl(Windows) / Cmd(Mac) to Select Multi Nodes</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use3.jpg">
                 </div>
             </div>
@@ -400,7 +400,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -408,7 +408,7 @@
                 <h4 class="oe_slogan">Set super bar position, left or right.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use5.jpg">
                 </div>
             </div>
@@ -416,7 +416,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <ul class="oe_spaced" style="padding:8px;font-weight: 300; font-size: 20px;">
diff --git a/app_module_superbar/static/description/index.html b/app_module_superbar/static/description/index.html
index 139f3250..713d4bdd 100644
--- a/app_module_superbar/static/description/index.html
+++ b/app_module_superbar/static/description/index.html
@@ -11,10 +11,10 @@
         </a> </h1>
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Apps Navigator by Category, Module Navigator is ready.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module1.jpg">
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module2.jpg">
         </div>
     </div>
@@ -25,7 +25,7 @@
                         <i class="fa fa-arrow-right text-warning"></i>Click to get demo.
                         </a> </h2>
         <div class="oe_demo">
-            <img class="oe_demo oe_screenshot" src="banner.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="banner.gif">
         </div>
         <div class="oe_span12 oe_spaced">
             <div class="alert alert-info" style="padding:8px;font-weight: 300; font-size: 20px;">
@@ -114,8 +114,8 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Product by category or type in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="https://apps.odoocdn.com/apps/assets/15.0/app_web_superbar/superbar.gif"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="https://apps.odoocdn.com/apps/assets/15.0/app_web_superbar/superbar.gif"/>
         </div>
     </div>
 </section>
@@ -123,7 +123,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="product1.jpg">
         </div>
     </div>
@@ -132,15 +132,15 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos3.jpg">
         </div>
     </div>
@@ -148,7 +148,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in HR employee.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="hr2.gif">
         </div>
     </div>
@@ -157,7 +157,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.jpg">
         </div>
     </div>
@@ -166,7 +166,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.jpg">
         </div>
     </div>
@@ -175,7 +175,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.jpg">
         </div>
     </div>
@@ -184,7 +184,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="contacts1.jpg">
         </div>
     </div>
@@ -211,7 +211,7 @@
                 <h4 class="oe_slogan">Show superbar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use7.jpg">
                 </div>
             </div>
@@ -219,7 +219,7 @@
                 <h4 class="oe_slogan">Show superbar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use8.jpg">
                 </div>
             </div>
@@ -227,7 +227,7 @@
                 <h4 class="oe_slogan">Show superbar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use9.jpg">
                 </div>
             </div>
@@ -235,7 +235,7 @@
                 <h4 class="oe_slogan">Show superbar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="usea.jpg">
                 </div>
             </div>
@@ -243,7 +243,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -251,7 +251,7 @@
                 <h4 class="oe_slogan">Click checkbox to set whether to show child nodes data.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use2.jpg">
                 </div>
             </div>
@@ -259,7 +259,7 @@
                 <h4 class="oe_slogan">Press Ctrl(Windows) / Cmd(Mac) to Select Multi Nodes</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use3.jpg">
                 </div>
             </div>
@@ -267,7 +267,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -275,7 +275,7 @@
                 <h4 class="oe_slogan">Set super bar position, left or right.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use5.jpg">
                 </div>
             </div>
@@ -283,7 +283,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <ul class="oe_spaced" style="padding:8px;font-weight: 300; font-size: 20px;">
diff --git a/app_mrp_production_zchart/static/description/index.html b/app_mrp_production_zchart/static/description/index.html
index aa938b59..b6867a2b 100644
--- a/app_mrp_production_zchart/static/description/index.html
+++ b/app_mrp_production_zchart/static/description/index.html
@@ -4,7 +4,7 @@
         <h3 class="oe_slogan">Very useful for show parent child relationship, like product category, stock location, hr department</h3>
     </div>
         <div class="oe_demo">
-            <img class="oe_demo oe_screenshot" src="banner.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="banner.gif">
         </div>
 
 </section>
@@ -93,15 +93,15 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">MRP Production Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo1.jpg">
         </div>
         <h4 class="oe_slogan">If we have a multi Bom like follow:</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_bom.jpg">
         </div>
         <h4 class="oe_slogan">Show sub manufacture order and quick access sub MO</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_mo.jpg">
         </div>
     </div>
@@ -111,11 +111,11 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">Product category Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo1.jpg">
         </div>
         <h4 class="oe_slogan">Show sub category and quick access category</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo2.jpg">
         </div>
     </div>
@@ -125,7 +125,7 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">Stock Location Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo4.jpg">
         </div>
     </div>
@@ -135,11 +135,11 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">HR Department Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo5.jpg">
         </div>
         <h1 class="text-danger text-center">HR Emploee Chart Hierarchy (this is include in odoo)</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo6.jpg">
         </div>
     </div>
@@ -148,7 +148,7 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">Account Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo7.jpg">
         </div>
     </div>
@@ -158,7 +158,7 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">User Alliance Distribution Multi level</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo9.jpg">
         </div>
     </div>
@@ -167,11 +167,11 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Easy to setup just use widget='web_chart_hierarchy'. like this</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="setup1.jpg">
         </div>
         <h4 class="oe_slogan">Also need to change view for better ui</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="setup2.jpg">
         </div>
         <h1><br/> Use follow param to setup widget:<br/></h1>
diff --git a/app_mrp_superbar/static/description/index.html b/app_mrp_superbar/static/description/index.html
index aa22aa48..eaeeda6f 100644
--- a/app_mrp_superbar/static/description/index.html
+++ b/app_mrp_superbar/static/description/index.html
@@ -6,7 +6,7 @@
 <section class="oe_container">
     <div class="oe_row">
         <div class="oe_span12">
-            <img class="oe_demo oe_screenshot" src="mrp1.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="mrp1.gif">
         </div>
         <h3 class="oe_slogan">Advance Search, Advance Filter with Parent Children Tree.</h3>
         <h1 class="text-danger text-center">Buy
@@ -131,8 +131,8 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Product by category or type in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="https://apps.odoocdn.com/apps/assets/14.0/app_web_superbar/superbar.gif"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="https://apps.odoocdn.com/apps/assets/14.0/app_web_superbar/superbar.gif"/>
         </div>
     </div>
 </section>
@@ -140,7 +140,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="product1.jpg">
         </div>
     </div>
@@ -149,15 +149,15 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos3.jpg">
         </div>
     </div>
@@ -165,7 +165,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in HR employee.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="hr2.gif">
         </div>
     </div>
@@ -174,7 +174,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.jpg">
         </div>
     </div>
@@ -183,7 +183,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.jpg">
         </div>
     </div>
@@ -192,7 +192,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in CRM.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="crm1.jpg">
         </div>
     </div>
@@ -201,7 +201,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.jpg">
         </div>
     </div>
@@ -210,7 +210,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in MRP.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="mrp1.gif">
         </div>
     </div>
@@ -219,7 +219,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in stock.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="stock1.jpg">
         </div>
     </div>
@@ -228,7 +228,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="contacts1.jpg">
         </div>
     </div>
@@ -237,10 +237,10 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Apps Navigator by Category, Module Navigator is ready.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module1.jpg">
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module2.jpg">
         </div>
     </div>
@@ -267,7 +267,7 @@
                 <h4 class="oe_slogan">Show superbar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use7.jpg">
                 </div>
             </div>
@@ -275,7 +275,7 @@
                 <h4 class="oe_slogan">Show superbar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use8.jpg">
                 </div>
             </div>
@@ -283,7 +283,7 @@
                 <h4 class="oe_slogan">Show superbar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use9.jpg">
                 </div>
             </div>
@@ -291,7 +291,7 @@
                 <h4 class="oe_slogan">Show superbar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="usea.jpg">
                 </div>
             </div>
@@ -299,7 +299,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -307,7 +307,7 @@
                 <h4 class="oe_slogan">Click checkbox to set whether to show child nodes data.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use2.jpg">
                 </div>
             </div>
@@ -315,7 +315,7 @@
                 <h4 class="oe_slogan">Press Ctrl(Windows) / Cmd(Mac) to Select Multi Nodes</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use3.jpg">
                 </div>
             </div>
@@ -323,7 +323,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -331,7 +331,7 @@
                 <h4 class="oe_slogan">Set super bar position, left or right.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use5.jpg">
                 </div>
             </div>
@@ -339,7 +339,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <ul class="oe_spaced" style="padding:8px;font-weight: 300; font-size: 20px;">
diff --git a/app_mrp_workcenter_zchart/static/description/index.html b/app_mrp_workcenter_zchart/static/description/index.html
index 8352d989..ac90911e 100644
--- a/app_mrp_workcenter_zchart/static/description/index.html
+++ b/app_mrp_workcenter_zchart/static/description/index.html
@@ -6,7 +6,7 @@
             <div class="oe_row">
                 <h3>Lastest update: v12.19.04.28</h3>
                 <div class="oe_span12">
-                    <img class="oe_demo  oe_screenshot"  style="max-height: 100%;" src="banner.png">
+                    <img class="oe_demo  oe_screenshot img img-fluid"  style="max-height: 100%;" src="banner.png">
                 </div>
                 <div class="oe_span12 oe_spaced">
                     <div class="alert alert-info" style="padding:8px;font-weight: 300; font-size: 20px;">
@@ -28,7 +28,7 @@
     <div class="oe_row oe_spaced">
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan"> </h4>
-        <div class="oe_demo  oe_screenshot">
+        <div class="oe_demo  oe_screenshot img img-fluid">
             <img  src=".jpg"/>
         </div>
     </div>
diff --git a/app_odoo_customize/static/description/index.html b/app_odoo_customize/static/description/index.html
index 402628f9..baa0b723 100644
--- a/app_odoo_customize/static/description/index.html
+++ b/app_odoo_customize/static/description/index.html
@@ -8,7 +8,7 @@
                     Get "app_web_enterprise" for more customize
                 </a>
             </h4>
-            <div class="oe_demo oe_screenshot">
+            <div class="oe_demo oe_screenshot img img-fluid">
                 <a class="btn btn-block btn-success mt16 mb16" target="_blank" href="https://apps.odoo.com/apps/modules/15.0/app_app_web_enterprise/">
                     <img src="app_web_enterprise_03.jpg" style="border:1px solid black"/>
                 </a>
@@ -24,9 +24,9 @@
                  get more powerful odoo apps from us.
                 </a>. like [superbar widget]
             </h4>
-            <div class="oe_demo oe_screenshot">
+            <div class="oe_demo oe_screenshot img img-fluid">
                 <a href="https://www.odoo.com/apps/modules/browse?author=odooai.cn" target="_blank">
-                    <img oe_demo oe_screenshot src="https://apps.odoocdn.com/apps/assets/15.0/app_web_superbar/superbar.gif"/>
+                    <img oe_demo oe_screenshot img img-fluid src="https://apps.odoocdn.com/apps/assets/15.0/app_web_superbar/superbar.gif"/>
                 </a>
             </div>
             <div class="oe_demo" style=" margin: 30px auto 0; padding: 0 15px 0 0; border:none; width: 96%;">
@@ -156,7 +156,7 @@
                 </p>
             </div>
 
-            <div class="oe_demo oe_screenshot">
+            <div class="oe_demo oe_screenshot img img-fluid">
                 <img src="cnreadme.png" style="border:1px solid black"/>
                 <br/>
             </div>
@@ -169,7 +169,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%;">
             <h2 class='oe_mt32'>Odoo Customize(Debranding Title,Language,Documentation,Quick Debug)</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="banner.gif" style="border:1px solid black"/>
             <br/>
             <img src="set3.jpg" style="border:1px solid black"/>
@@ -179,7 +179,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%;">
             <h2 class='oe_mt32'>Multi-language support: Chinese ready</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="set11.png" style="border:1px solid black"/>
             </br>
             <img src="set12.png" style="border:1px solid black"/>
@@ -192,7 +192,7 @@
              style=" argin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>How to use: Go to Settings -> odooApp Settings</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="set1.jpg" style="border:1px solid black"/>
             <br/>
         </div>
@@ -203,7 +203,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>Set System Icon (odoo 10 only)</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="set19.jpg" style="border:1px solid black"/>
             <br/>
         </div>
@@ -215,12 +215,12 @@
             <h2 class='oe_mt32'>Show/Hide Author and Website in Apps Dashboard</h2>
         </div>
         <p>Before</p>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="set18-1.jpg" style="border:1px solid black"/>
             <br/>
         </div>
         <p>After uncheck "Show Author in Apps Dashboard"</p>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="set18-2.jpg" style="border:1px solid black"/>
             <br/>
         </div>
@@ -232,7 +232,7 @@
             <h2 class='oe_mt32'>Show quick upgrade in app dashboard, click to show module info not go to odoo.com</h2>
         </div>
         <p>No more redirect to odoo.com</p>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="set20.jpg" style="border:1px solid black"/>
             <br/>
         </div>
@@ -244,7 +244,7 @@
             <h2 class='oe_mt32'>Setup more flags: just rename the flag pic to locale code of the country</h2>
             <p>You can find the pictures in "\app-odoo\app_odoo_customize\static\src\img\flags"</p>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="set2.png" style="border:1px solid black"/>
             <br/>
         </div>
@@ -255,7 +255,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%;">
             <h2 class='oe_mt32'>Customize Module Url(eg. Enterprise).</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="set21.jpg" style="border:1px solid black"/>
             <br/>
         </div>
@@ -267,7 +267,7 @@
             <h2 class='oe_mt32'>Quick Delete test Data.</h2>
             <p>You can quickly delete all the test data in Apps: Sales/POS/Purchase/MRP/Inventory/Accounting/Message/Workflow etc.</p>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="set3.jpg" style="border:1px solid black"/>
             <br/>
         </div>
diff --git a/app_pos_superbar/static/description/index.html b/app_pos_superbar/static/description/index.html
index 9385aed6..31bb0cdd 100644
--- a/app_pos_superbar/static/description/index.html
+++ b/app_pos_superbar/static/description/index.html
@@ -6,7 +6,7 @@
 <section class="oe_container">
     <div class="oe_row">
         <div class="oe_demo">
-            <img class="oe_demo oe_screenshot" src="banner.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="banner.gif">
         </div>
         <h3 class="oe_slogan">Advance Search, Advance Filter with Parent Children Tree.</h3>
         <h1 class="text-danger text-center">Buy
@@ -131,8 +131,8 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Product by category or type in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="use.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="use.jpg"/>
         </div>
     </div>
 </section>
@@ -140,7 +140,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="product1.jpg">
         </div>
     </div>
@@ -149,15 +149,15 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos3.jpg">
         </div>
     </div>
@@ -165,7 +165,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in HR employee.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="hr2.gif">
         </div>
     </div>
@@ -174,7 +174,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.jpg">
         </div>
     </div>
@@ -183,7 +183,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.jpg">
         </div>
     </div>
@@ -192,7 +192,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in CRM.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="crm1.jpg">
         </div>
     </div>
@@ -201,7 +201,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.jpg">
         </div>
     </div>
@@ -210,7 +210,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in MRP.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="mrp1.gif">
         </div>
     </div>
@@ -219,7 +219,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in stock.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="stock1.jpg">
         </div>
     </div>
@@ -228,7 +228,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="contacts1.jpg">
         </div>
     </div>
@@ -237,10 +237,10 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Apps Navigator by Category, Module Navigator is ready.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module1.jpg">
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module2.jpg">
         </div>
     </div>
@@ -267,7 +267,7 @@
                 <h4 class="oe_slogan">Show superbar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use7.jpg">
                 </div>
             </div>
@@ -275,7 +275,7 @@
                 <h4 class="oe_slogan">Show superbar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use8.jpg">
                 </div>
             </div>
@@ -283,7 +283,7 @@
                 <h4 class="oe_slogan">Show superbar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use9.jpg">
                 </div>
             </div>
@@ -291,7 +291,7 @@
                 <h4 class="oe_slogan">Show superbar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="usea.jpg">
                 </div>
             </div>
@@ -299,7 +299,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -307,7 +307,7 @@
                 <h4 class="oe_slogan">Click checkbox to set whether to show child nodes data.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use2.jpg">
                 </div>
             </div>
@@ -315,7 +315,7 @@
                 <h4 class="oe_slogan">Press Ctrl(Windows) / Cmd(Mac) to Select Multi Nodes</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use3.jpg">
                 </div>
             </div>
@@ -323,7 +323,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -331,7 +331,7 @@
                 <h4 class="oe_slogan">Set super bar position, left or right.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use5.jpg">
                 </div>
             </div>
@@ -339,7 +339,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <ul class="oe_spaced" style="padding:8px;font-weight: 300; font-size: 20px;">
diff --git a/app_product_category_zchart/static/description/index.html b/app_product_category_zchart/static/description/index.html
index 93078230..8235b6e7 100644
--- a/app_product_category_zchart/static/description/index.html
+++ b/app_product_category_zchart/static/description/index.html
@@ -53,7 +53,7 @@
             </a>
         </h1>
         <div class="oe_demo">
-            <img class="oe_demo oe_screenshot" src="banner.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="banner.gif">
         </div>
 
             <div class="alert alert-info" style="padding:8px;font-weight: 300; font-size: 20px;">
@@ -93,15 +93,15 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">MRP Production Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo1.jpg">
         </div>
         <h4 class="oe_slogan">If we have a multi Bom like follow:</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_bom.jpg">
         </div>
         <h4 class="oe_slogan">Show sub manufacture order and quick access sub MO</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_mo.jpg">
         </div>
     </div>
@@ -111,11 +111,11 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">Product category Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo1.jpg">
         </div>
         <h4 class="oe_slogan">Show sub category and quick access category</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo2.jpg">
         </div>
     </div>
@@ -124,7 +124,7 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">Stock Location Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo4.jpg">
         </div>
     </div>
@@ -134,11 +134,11 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">HR Department Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo5.jpg">
         </div>
         <h1 class="text-danger text-center">HR Emploee Chart Hierarchy (this is include in odoo)</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo6.jpg">
         </div>
     </div>
@@ -147,7 +147,7 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">Account Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo7.jpg">
         </div>
     </div>
@@ -157,7 +157,7 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">User Alliance Distribution Multi level</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo9.jpg">
         </div>
     </div>
@@ -166,11 +166,11 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Easy to setup just use widget='web_chart_hierarchy'. like this</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="setup1.jpg">
         </div>
         <h4 class="oe_slogan">Also need to change view for better ui</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="setup2.jpg">
         </div>
         <h1><br/> Use follow param to setup widget:<br/></h1>
diff --git a/app_product_superbar/static/description/index.html b/app_product_superbar/static/description/index.html
index d2ee53c3..a4dc7ac1 100644
--- a/app_product_superbar/static/description/index.html
+++ b/app_product_superbar/static/description/index.html
@@ -32,7 +32,7 @@
 <section class="oe_container container">
     <div class="oe_row">
         <div class="oe_demo">
-            <img class="oe_demo oe_screenshot" src="banner.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="banner.gif">
         </div>
         <h3 class="oe_slogan">Advance Search, Advance Filter with Parent Children Tree.</h3>
         <h1 class="text-danger text-center">Buy
@@ -157,8 +157,8 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Product by category or type in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="use.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="use.jpg"/>
         </div>
     </div>
 </section>
@@ -169,15 +169,15 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h4 class="oe_slogan">Filter product or any data in search more windows</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="searchmore.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="searchmore.jpg"/>
         </div>
     </div>
 </section>
 <section class="oe_container container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="product1.jpg">
         </div>
     </div>
@@ -186,15 +186,15 @@
 <section class="oe_container container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos3.jpg">
         </div>
     </div>
@@ -202,7 +202,7 @@
 <section class="oe_container container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in HR employee.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="hr2.gif">
         </div>
     </div>
@@ -211,7 +211,7 @@
 <section class="oe_container container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.jpg">
         </div>
     </div>
@@ -220,7 +220,7 @@
 <section class="oe_container container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.jpg">
         </div>
     </div>
@@ -229,7 +229,7 @@
 <section class="oe_container container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in CRM.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="crm1.jpg">
         </div>
     </div>
@@ -238,7 +238,7 @@
 <section class="oe_container container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.jpg">
         </div>
     </div>
@@ -247,7 +247,7 @@
 <section class="oe_container container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in MRP.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="mrp1.gif">
         </div>
     </div>
@@ -256,7 +256,7 @@
 <section class="oe_container container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in stock.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="stock1.jpg">
         </div>
     </div>
@@ -265,7 +265,7 @@
 <section class="oe_container container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="contacts1.jpg">
         </div>
     </div>
@@ -274,10 +274,10 @@
 <section class="oe_container container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Apps Navigator by Category, Module Navigator is ready.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module1.jpg">
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module2.jpg">
         </div>
     </div>
@@ -304,7 +304,7 @@
                 <h4 class="oe_slogan">Show superbar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use7.jpg">
                 </div>
             </div>
@@ -312,7 +312,7 @@
                 <h4 class="oe_slogan">Show superbar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use8.jpg">
                 </div>
             </div>
@@ -320,7 +320,7 @@
                 <h4 class="oe_slogan">Show superbar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use9.jpg">
                 </div>
             </div>
@@ -328,7 +328,7 @@
                 <h4 class="oe_slogan">Show superbar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="usea.jpg">
                 </div>
             </div>
@@ -336,7 +336,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -344,7 +344,7 @@
                 <h4 class="oe_slogan">Click checkbox to set whether to show child nodes data.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use2.jpg">
                 </div>
             </div>
@@ -352,7 +352,7 @@
                 <h4 class="oe_slogan">Press Ctrl(Windows) / Cmd(Mac) to Select Multi Nodes</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use3.jpg">
                 </div>
             </div>
@@ -360,7 +360,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -368,7 +368,7 @@
                 <h4 class="oe_slogan">Set super bar position, left or right.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use5.jpg">
                 </div>
             </div>
@@ -376,7 +376,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <ul class="oe_spaced" style="padding:8px;font-weight: 300; font-size: 20px;">
diff --git a/app_product_superbar_pro/static/description/index.html b/app_product_superbar_pro/static/description/index.html
index c5b8feff..972a7e43 100644
--- a/app_product_superbar_pro/static/description/index.html
+++ b/app_product_superbar_pro/static/description/index.html
@@ -6,7 +6,7 @@
 <section class="oe_container">
     <div class="oe_row">
         <div class="oe_span12">
-            <img class="oe_demo oe_screenshot" src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/superbar_pro.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/superbar_pro.gif">
         </div>
         <h3 class="oe_slogan">Advance Search, Advance Filter with Parent Children Tree.</h3>
         <h1 class="text-danger text-center">Buy
@@ -226,8 +226,8 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">Instant Search in 1 Click. Lazy Search for big data.</h1>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/searchmode.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/searchmode.jpg"/>
         </div>
     </div>
 </section>
@@ -237,8 +237,8 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Sale by date and team, saleman, etc.., list, kanban, pivot, search more view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/banner.png"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/banner.png"/>
         </div>
     </div>
 </section>
@@ -249,8 +249,8 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h4 class="oe_slogan">Filter product or any data in search more windows</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/searchmore.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/searchmore.jpg"/>
         </div>
     </div>
 </section>
@@ -258,11 +258,11 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in Sale. Search date range, search ammount in lazy mode</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/sale1.gif">
         </div>
         <h4 class="oe_slogan">Use in Sale. Search date, search team in instant mode</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/sale2.gif">
         </div>
     </div>
@@ -271,7 +271,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/product1.jpg">
         </div>
     </div>
@@ -280,15 +280,15 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/pos3.jpg">
         </div>
     </div>
@@ -297,7 +297,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in HR employee.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/hr2.gif">
         </div>
     </div>
@@ -306,7 +306,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/account1.jpg">
         </div>
     </div>
@@ -315,7 +315,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in CRM.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/crm1.jpg">
         </div>
     </div>
@@ -324,7 +324,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/purchase1.jpg">
         </div>
     </div>
@@ -333,7 +333,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in MRP.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/mrp1.gif">
         </div>
     </div>
@@ -342,7 +342,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in stock.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/stock1.jpg">
         </div>
     </div>
@@ -351,7 +351,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/contacts1.jpg">
         </div>
     </div>
@@ -360,10 +360,10 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Apps Navigator by Category, Module Navigator is ready.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module1.jpg">
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/demo_module2.jpg">
         </div>
     </div>
@@ -373,15 +373,15 @@
     <div class="oe_row oe_spaced">
         <h1 class="text-danger text-center">Buy this apps, get Extra bonus apps, App zTree widget, Hierarchy Parent tree in m2o select</h1>
         <h4 class="oe_slogan">Ready for product category Hierarchy Parent tree in m2o select</h4>
-        <div class="oe_screenshot">
+        <div class="oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/z_product1.gif">
         </div>
         <h4 class="oe_slogan">Ready for Stock Location Hierarchy Parent tree in m2o select</h4>
-        <div class="oe_screenshot">
+        <div class="oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/z_stock1.gif">
         </div>
         <h4 class="oe_slogan">Ready for Hr Department Hierarchy Parent tree in m2o select</h4>
-        <div class="oe_screenshot">
+        <div class="oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/z_hr1.gif">
         </div>
     </div>
@@ -408,7 +408,7 @@
                 <h4 class="oe_slogan">Show Super search sidebar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/use7.jpg">
                 </div>
             </div>
@@ -416,7 +416,7 @@
                 <h4 class="oe_slogan">Show Super search sidebar in search more view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/searchmore.jpg">
                 </div>
             </div>
@@ -424,7 +424,7 @@
                 <h4 class="oe_slogan">Show Super search sidebar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/use8.jpg">
                 </div>
             </div>
@@ -432,7 +432,7 @@
                 <h4 class="oe_slogan">Show Super search sidebar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/use9.jpg">
                 </div>
             </div>
@@ -440,7 +440,7 @@
                 <h4 class="oe_slogan">Show Super search sidebar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/usea.jpg">
                 </div>
             </div>
@@ -448,7 +448,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -456,7 +456,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -464,7 +464,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <h4 class="oe_slogan oe_spaced">Attribute of superbar</h4>
diff --git a/app_product_ztree/static/description/index.html b/app_product_ztree/static/description/index.html
index 1ae3b258..ba7260db 100644
--- a/app_product_ztree/static/description/index.html
+++ b/app_product_ztree/static/description/index.html
@@ -75,7 +75,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in product.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo2.jpg">
         </div>
     </div>
@@ -84,7 +84,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo1.jpg">
         </div>
     </div>
@@ -93,7 +93,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in stock location.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo3.jpg">
         </div>
     </div>
@@ -102,7 +102,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in hr department.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo4.jpg">
         </div>
     </div>
@@ -111,7 +111,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in hr employee.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo5.jpg">
         </div>
     </div>
@@ -123,7 +123,7 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">(!Need extra module and pay, release soon)Easy to navigator.</h1>
         <h4 class="oe_slogan">Product, employee in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo11.jpg">
         </div>
     </div>
@@ -132,7 +132,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">(!Need extra module and pay, release soon)List view</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo12.jpg">
         </div>
     </div>
@@ -141,7 +141,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Easy to setup just use widget='widget_select'. like this</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="setup1.jpg">
         </div>
         <h1><br/> Use follow param to setup widget:<br/></h1>
diff --git a/app_project_superbar/static/description/index.html b/app_project_superbar/static/description/index.html
index de231c4a..f01ef3fe 100644
--- a/app_project_superbar/static/description/index.html
+++ b/app_project_superbar/static/description/index.html
@@ -6,7 +6,7 @@
 <section class="oe_container">
     <div class="oe_row">
         <div class="oe_demo">
-            <img class="oe_demo oe_screenshot" src="mrp1.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="mrp1.gif">
         </div>
         <h3 class="oe_slogan">Advance Search, Advance Filter with Parent Children Tree.</h3>
         <h1 class="text-danger text-center">Buy
@@ -138,8 +138,8 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Product by category or type in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="https://apps.odoocdn.com/apps/assets/15.0/app_web_superbar/superbar.gif"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="https://apps.odoocdn.com/apps/assets/15.0/app_web_superbar/superbar.gif"/>
         </div>
     </div>
 </section>
@@ -147,7 +147,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="product1.jpg">
         </div>
     </div>
@@ -156,15 +156,15 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos3.jpg">
         </div>
     </div>
@@ -172,7 +172,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in HR employee.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="hr2.gif">
         </div>
     </div>
@@ -181,7 +181,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.jpg">
         </div>
     </div>
@@ -190,11 +190,11 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Project.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="project1.jpg">
         </div>
         <h4 class="oe_slogan">Use in Project task.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="project2.jpg">
         </div>
     </div>
@@ -203,7 +203,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.jpg">
         </div>
     </div>
@@ -212,7 +212,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in CRM.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="crm1.jpg">
         </div>
     </div>
@@ -221,7 +221,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.jpg">
         </div>
     </div>
@@ -230,7 +230,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in MRP.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="mrp1.gif">
         </div>
     </div>
@@ -239,7 +239,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in stock.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="stock1.jpg">
         </div>
     </div>
@@ -248,7 +248,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="contacts1.jpg">
         </div>
     </div>
@@ -257,10 +257,10 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Apps Navigator by Category, Module Navigator is ready.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module1.jpg">
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module2.jpg">
         </div>
     </div>
@@ -287,7 +287,7 @@
                 <h4 class="oe_slogan">Show superbar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use7.jpg">
                 </div>
             </div>
@@ -295,7 +295,7 @@
                 <h4 class="oe_slogan">Show superbar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use8.jpg">
                 </div>
             </div>
@@ -303,7 +303,7 @@
                 <h4 class="oe_slogan">Show superbar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use9.jpg">
                 </div>
             </div>
@@ -311,7 +311,7 @@
                 <h4 class="oe_slogan">Show superbar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="usea.jpg">
                 </div>
             </div>
@@ -319,7 +319,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -327,7 +327,7 @@
                 <h4 class="oe_slogan">Click checkbox to set whether to show child nodes data.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use2.jpg">
                 </div>
             </div>
@@ -335,7 +335,7 @@
                 <h4 class="oe_slogan">Press Ctrl(Windows) / Cmd(Mac) to Select Multi Nodes</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use3.jpg">
                 </div>
             </div>
@@ -343,7 +343,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -351,7 +351,7 @@
                 <h4 class="oe_slogan">Set super bar position, left or right.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use5.jpg">
                 </div>
             </div>
@@ -359,7 +359,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <ul class="oe_spaced" style="padding:8px;font-weight: 300; font-size: 20px;">
diff --git a/app_purchase_product_multi_add/static/description/index.html b/app_purchase_product_multi_add/static/description/index.html
index eb7305fc..5464eecf 100644
--- a/app_purchase_product_multi_add/static/description/index.html
+++ b/app_purchase_product_multi_add/static/description/index.html
@@ -10,7 +10,7 @@
                  style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
                 <h2 class='oe_mt32'>One Click to add multi product to Purchase Order.</h2>
             </div>
-            <div class="oe_demo oe_screenshot">
+            <div class="oe_demo oe_screenshot img img-fluid">
                 <img src="banner.gif" style="border:1px solid black"/>
                 <br/>
             </div>
@@ -30,12 +30,12 @@
             <li>6. You can also make any one2many field to get this feature by config the xml.</li>
             <li>7. You can filter or group the product / object, in the pop windows, and the multi select and add to the order</li>
         </ul>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="cnreadme.jpg" style="border:1px solid black"/>
             <br/>
         </div>
         <h3 class="oe_slogan">Easy to Use. Click "Multi Add Items" in the one2many tree view.</h3>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <h2 class='oe_mt32'>Step1. Click "Multi Add Items" in any order form.</h2>
             <img src="use1.jpg" style="border:1px solid black"/>
             <br/>
@@ -52,7 +52,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>1. One Click to add multi product to Sale Order.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.gif" style="border:1px solid black"/>
             <br/>
         </div>
@@ -62,7 +62,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>2. One Click to add multi product to Purchase Order.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.gif" style="border:1px solid black"/>
             <br/>
         </div>
@@ -72,7 +72,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>3. One Click to add multi product to MRP Bom.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="mrp1.gif" style="border:1px solid black"/>
             <br/>
         </div>
@@ -82,7 +82,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>4. One Click to add multi product to Stock Picking Order.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="stock1.gif" style="border:1px solid black"/>
             <br/>
         </div>
@@ -92,7 +92,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>5. One Click to add multi product to Account Customer Invoice, Vendor Bill.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.gif" style="border:1px solid black"/>
             <br/>
         </div>
@@ -102,7 +102,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>6. You can also make any one2many field to get this feature by config the xml.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <p>Check this example.</p>
             <img src="guide1.jpg" style="border:1px solid black"/>
             <br/>
diff --git a/app_purchase_superbar/static/description/index.html b/app_purchase_superbar/static/description/index.html
index d077c73b..992aa957 100644
--- a/app_purchase_superbar/static/description/index.html
+++ b/app_purchase_superbar/static/description/index.html
@@ -16,7 +16,7 @@
 <section class="oe_container">
     <div class="oe_row">
         <div class="oe_span12">
-            <img class="oe_demo oe_screenshot" src="banner.png">
+            <img class="oe_demo oe_screenshot img img-fluid" src="banner.png">
         </div>
         <div class="oe_span12 oe_spaced">
             <div class="alert alert-info" style="padding:8px;font-weight: 300; font-size: 20px;">
@@ -83,15 +83,15 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Product by category or type in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="https://apps.odoocdn.com/apps/assets/15.0/app_web_superbar/superbar.gif"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="https://apps.odoocdn.com/apps/assets/15.0/app_web_superbar/superbar.gif"/>
         </div>
     </div>
 </section>
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="product1.jpg">
         </div>
     </div>
@@ -100,15 +100,15 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos3.jpg">
         </div>
     </div>
@@ -116,7 +116,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.jpg">
         </div>
     </div>
@@ -125,7 +125,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.jpg">
         </div>
     </div>
@@ -134,7 +134,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.jpg">
         </div>
     </div>
@@ -143,7 +143,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="contacts1.jpg">
         </div>
     </div>
@@ -170,7 +170,7 @@
                 <h4 class="oe_slogan">Show superbar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use7.jpg">
                 </div>
             </div>
@@ -178,7 +178,7 @@
                 <h4 class="oe_slogan">Show superbar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use8.jpg">
                 </div>
             </div>
@@ -186,7 +186,7 @@
                 <h4 class="oe_slogan">Show superbar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use9.jpg">
                 </div>
             </div>
@@ -194,7 +194,7 @@
                 <h4 class="oe_slogan">Show superbar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="usea.jpg">
                 </div>
             </div>
@@ -202,7 +202,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -210,7 +210,7 @@
                 <h4 class="oe_slogan">Click checkbox to set whether to show child nodes data.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use2.jpg">
                 </div>
             </div>
@@ -218,7 +218,7 @@
                 <h4 class="oe_slogan">Press Ctrl(Windows) / Cmd(Mac) to Select Multi Nodes</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use3.jpg">
                 </div>
             </div>
@@ -226,7 +226,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -234,7 +234,7 @@
                 <h4 class="oe_slogan">Set super bar position, left or right.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use5.jpg">
                 </div>
             </div>
@@ -242,7 +242,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <ul class="oe_spaced" style="padding:8px;font-weight: 300; font-size: 20px;">
diff --git a/app_sale_product_multi_add/static/description/index.html b/app_sale_product_multi_add/static/description/index.html
index 57706dc7..48cebb34 100644
--- a/app_sale_product_multi_add/static/description/index.html
+++ b/app_sale_product_multi_add/static/description/index.html
@@ -10,7 +10,7 @@
                  style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
                 <h2 class='oe_mt32'>One Click to add multi product to Sale Order.</h2>
             </div>
-            <div class="oe_demo oe_screenshot">
+            <div class="oe_demo oe_screenshot img img-fluid">
                 <img src="sale1.gif" style="border:1px solid black"/>
                 <br/>
             </div>
@@ -30,12 +30,12 @@
             <li>6. You can also make any one2many field to get this feature by config the xml.</li>
             <li>7. You can filter or group the product / object, in the pop windows, and the multi select and add to the order</li>
         </ul>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="cnreadme.jpg" style="border:1px solid black"/>
             <br/>
         </div>
         <h3 class="oe_slogan">Easy to Use. Click "Multi Add Items" in the one2many tree view.</h3>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <h2 class='oe_mt32'>Step1. Click "Multi Add Items" in any order form.</h2>
             <img src="use1.jpg" style="border:1px solid black"/>
             <br/>
@@ -52,7 +52,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>1. One Click to add multi product to Sale Order.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.gif" style="border:1px solid black"/>
             <br/>
         </div>
@@ -62,7 +62,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>2. One Click to add multi product to Purchase Order.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.gif" style="border:1px solid black"/>
             <br/>
         </div>
@@ -72,7 +72,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>3. One Click to add multi product to MRP Bom.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="mrp1.gif" style="border:1px solid black"/>
             <br/>
         </div>
@@ -82,7 +82,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>4. One Click to add multi product to Stock Picking Order.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="stock1.gif" style="border:1px solid black"/>
             <br/>
         </div>
@@ -92,7 +92,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>5. One Click to add multi product to Account Customer Invoice, Vendor Bill.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.gif" style="border:1px solid black"/>
             <br/>
         </div>
@@ -102,7 +102,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>6. You can also make any one2many field to get this feature by config the xml.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <p>Check this example.</p>
             <img src="guide1.jpg" style="border:1px solid black"/>
             <br/>
diff --git a/app_sale_superbar/static/description/index.html b/app_sale_superbar/static/description/index.html
index b52d285b..91177246 100644
--- a/app_sale_superbar/static/description/index.html
+++ b/app_sale_superbar/static/description/index.html
@@ -16,7 +16,7 @@
 <section class="oe_container">
     <div class="oe_row">
         <div class="oe_span12">
-            <img class="oe_demo oe_screenshot" src="banner.png">
+            <img class="oe_demo oe_screenshot img img-fluid" src="banner.png">
         </div>
         <div class="oe_span12 oe_spaced">
             <div class="alert alert-info" style="padding:8px;font-weight: 300; font-size: 20px;">
@@ -83,15 +83,15 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Product by category or type in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="https://apps.odoocdn.com/apps/assets/15.0/app_web_superbar/superbar.gif"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="https://apps.odoocdn.com/apps/assets/15.0/app_web_superbar/superbar.gif"/>
         </div>
     </div>
 </section>
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="product1.jpg">
         </div>
     </div>
@@ -100,15 +100,15 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos3.jpg">
         </div>
     </div>
@@ -116,7 +116,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.jpg">
         </div>
     </div>
@@ -125,7 +125,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.jpg">
         </div>
     </div>
@@ -134,7 +134,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.jpg">
         </div>
     </div>
@@ -143,7 +143,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="contacts1.jpg">
         </div>
     </div>
@@ -170,7 +170,7 @@
                 <h4 class="oe_slogan">Show superbar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use7.jpg">
                 </div>
             </div>
@@ -178,7 +178,7 @@
                 <h4 class="oe_slogan">Show superbar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use8.jpg">
                 </div>
             </div>
@@ -186,7 +186,7 @@
                 <h4 class="oe_slogan">Show superbar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use9.jpg">
                 </div>
             </div>
@@ -194,7 +194,7 @@
                 <h4 class="oe_slogan">Show superbar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="usea.jpg">
                 </div>
             </div>
@@ -202,7 +202,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -210,7 +210,7 @@
                 <h4 class="oe_slogan">Click checkbox to set whether to show child nodes data.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use2.jpg">
                 </div>
             </div>
@@ -218,7 +218,7 @@
                 <h4 class="oe_slogan">Press Ctrl(Windows) / Cmd(Mac) to Select Multi Nodes</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use3.jpg">
                 </div>
             </div>
@@ -226,7 +226,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -234,7 +234,7 @@
                 <h4 class="oe_slogan">Set super bar position, left or right.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use5.jpg">
                 </div>
             </div>
@@ -242,7 +242,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <ul class="oe_spaced" style="padding:8px;font-weight: 300; font-size: 20px;">
diff --git a/app_sale_superbar_pro/static/description/index.html b/app_sale_superbar_pro/static/description/index.html
index 27d31478..1bca5527 100644
--- a/app_sale_superbar_pro/static/description/index.html
+++ b/app_sale_superbar_pro/static/description/index.html
@@ -6,7 +6,7 @@
 <section class="oe_container">
     <div class="oe_row">
         <div class="oe_span12">
-            <img class="oe_demo oe_screenshot" src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/superbar_pro.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/superbar_pro.gif">
         </div>
         <h3 class="oe_slogan">Advance Search, Advance Filter with Parent Children Tree.</h3>
         <h1 class="text-danger text-center">Buy
@@ -226,8 +226,8 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">Instant Search in 1 Click. Lazy Search for big data.</h1>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/searchmode.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/searchmode.jpg"/>
         </div>
     </div>
 </section>
@@ -237,8 +237,8 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Sale by date and team, saleman, etc.., list, kanban, pivot, search more view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/banner.png"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/banner.png"/>
         </div>
     </div>
 </section>
@@ -249,8 +249,8 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h4 class="oe_slogan">Filter product or any data in search more windows</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/searchmore.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/searchmore.jpg"/>
         </div>
     </div>
 </section>
@@ -258,11 +258,11 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in Sale. Search date range, search ammount in lazy mode</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/sale1.gif">
         </div>
         <h4 class="oe_slogan">Use in Sale. Search date, search team in instant mode</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/sale2.gif">
         </div>
     </div>
@@ -271,7 +271,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/13.0/app_web_superbar_pro/product1.jpg">
         </div>
     </div>
@@ -280,15 +280,15 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/pos3.jpg">
         </div>
     </div>
@@ -297,7 +297,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in HR employee.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/hr2.gif">
         </div>
     </div>
@@ -306,7 +306,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/account1.jpg">
         </div>
     </div>
@@ -315,7 +315,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in CRM.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/crm1.jpg">
         </div>
     </div>
@@ -324,7 +324,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/purchase1.jpg">
         </div>
     </div>
@@ -333,7 +333,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in MRP.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/mrp1.gif">
         </div>
     </div>
@@ -342,7 +342,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in stock.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/stock1.jpg">
         </div>
     </div>
@@ -351,7 +351,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/contacts1.jpg">
         </div>
     </div>
@@ -360,10 +360,10 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Apps Navigator by Category, Module Navigator is ready.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module1.jpg">
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/demo_module2.jpg">
         </div>
     </div>
@@ -373,15 +373,15 @@
     <div class="oe_row oe_spaced">
         <h1 class="text-danger text-center">Buy this apps, get Extra bonus apps, App zTree widget, Hierarchy Parent tree in m2o select</h1>
         <h4 class="oe_slogan">Ready for product category Hierarchy Parent tree in m2o select</h4>
-        <div class="oe_screenshot">
+        <div class="oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/z_product1.gif">
         </div>
         <h4 class="oe_slogan">Ready for Stock Location Hierarchy Parent tree in m2o select</h4>
-        <div class="oe_screenshot">
+        <div class="oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/z_stock1.gif">
         </div>
         <h4 class="oe_slogan">Ready for Hr Department Hierarchy Parent tree in m2o select</h4>
-        <div class="oe_screenshot">
+        <div class="oe_screenshot img img-fluid">
             <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/z_hr1.gif">
         </div>
     </div>
@@ -408,7 +408,7 @@
                 <h4 class="oe_slogan">Show Super search sidebar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/use7.jpg">
                 </div>
             </div>
@@ -416,7 +416,7 @@
                 <h4 class="oe_slogan">Show Super search sidebar in search more view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/searchmore.jpg">
                 </div>
             </div>
@@ -424,7 +424,7 @@
                 <h4 class="oe_slogan">Show Super search sidebar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/use8.jpg">
                 </div>
             </div>
@@ -432,7 +432,7 @@
                 <h4 class="oe_slogan">Show Super search sidebar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/use9.jpg">
                 </div>
             </div>
@@ -440,7 +440,7 @@
                 <h4 class="oe_slogan">Show Super search sidebar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="//apps.odoocdn.com/apps/assets/15.0/app_web_superbar/usea.jpg">
                 </div>
             </div>
@@ -448,7 +448,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -456,7 +456,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -464,7 +464,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <h4 class="oe_slogan oe_spaced">Attribute of superbar</h4>
diff --git a/app_stock_location_zchart/static/description/index.html b/app_stock_location_zchart/static/description/index.html
index c3842df7..da41c8da 100644
--- a/app_stock_location_zchart/static/description/index.html
+++ b/app_stock_location_zchart/static/description/index.html
@@ -53,7 +53,7 @@
             </a>
         </h1>
         <div class="oe_demo">
-            <img class="oe_demo oe_screenshot" src="banner.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="banner.gif">
         </div>
 
             <div class="alert alert-info" style="padding:8px;font-weight: 300; font-size: 20px;">
@@ -93,15 +93,15 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">MRP Production Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo1.jpg">
         </div>
         <h4 class="oe_slogan">If we have a multi Bom like follow:</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_bom.jpg">
         </div>
         <h4 class="oe_slogan">Show sub manufacture order and quick access sub MO</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_mo.jpg">
         </div>
     </div>
@@ -111,11 +111,11 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">Product category Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo1.jpg">
         </div>
         <h4 class="oe_slogan">Show sub category and quick access category</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo2.jpg">
         </div>
     </div>
@@ -124,7 +124,7 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">Stock Location Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo4.jpg">
         </div>
     </div>
@@ -134,11 +134,11 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">HR Department Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo5.jpg">
         </div>
         <h1 class="text-danger text-center">HR Emploee Chart Hierarchy (this is include in odoo)</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo6.jpg">
         </div>
     </div>
@@ -147,7 +147,7 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">Account Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo7.jpg">
         </div>
     </div>
@@ -157,7 +157,7 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">User Alliance Distribution Multi level</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo9.jpg">
         </div>
     </div>
@@ -166,11 +166,11 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Easy to setup just use widget='web_chart_hierarchy'. like this</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="setup1.jpg">
         </div>
         <h4 class="oe_slogan">Also need to change view for better ui</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="setup2.jpg">
         </div>
         <h1><br/> Use follow param to setup widget:<br/></h1>
diff --git a/app_stock_picking_product_multi_add/static/description/index.html b/app_stock_picking_product_multi_add/static/description/index.html
index 5a6a5d5f..9fbf0de7 100644
--- a/app_stock_picking_product_multi_add/static/description/index.html
+++ b/app_stock_picking_product_multi_add/static/description/index.html
@@ -10,7 +10,7 @@
                  style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
                 <h2 class='oe_mt32'>One Click to add multi product to Stock Picking Order.</h2>
             </div>
-            <div class="oe_demo oe_screenshot">
+            <div class="oe_demo oe_screenshot img img-fluid">
                 <img src="sale1.gif" style="border:1px solid black"/>
                 <br/>
             </div>
@@ -30,12 +30,12 @@
             <li>6. You can also make any one2many field to get this feature by config the xml.</li>
             <li>7. You can filter or group the product / object, in the pop windows, and the multi select and add to the order</li>
         </ul>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="cnreadme.jpg" style="border:1px solid black"/>
             <br/>
         </div>
         <h3 class="oe_slogan">Easy to Use. Click "Multi Add Items" in the one2many tree view.</h3>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <h2 class='oe_mt32'>Step1. Click "Multi Add Items" in any order form.</h2>
             <img src="use1.jpg" style="border:1px solid black"/>
             <br/>
@@ -52,7 +52,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>1. One Click to add multi product to Sale Order.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.gif" style="border:1px solid black"/>
             <br/>
         </div>
@@ -62,7 +62,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>2. One Click to add multi product to Purchase Order.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.gif" style="border:1px solid black"/>
             <br/>
         </div>
@@ -72,7 +72,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>3. One Click to add multi product to MRP Bom.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="mrp1.gif" style="border:1px solid black"/>
             <br/>
         </div>
@@ -82,7 +82,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>4. One Click to add multi product to Stock Picking Order.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="stock1.gif" style="border:1px solid black"/>
             <br/>
         </div>
@@ -92,7 +92,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>5. One Click to add multi product to Account Customer Invoice, Vendor Bill.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.gif" style="border:1px solid black"/>
             <br/>
         </div>
@@ -102,7 +102,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%; ">
             <h2 class='oe_mt32'>6. You can also make any one2many field to get this feature by config the xml.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <p>Check this example.</p>
             <img src="guide1.jpg" style="border:1px solid black"/>
             <br/>
diff --git a/app_stock_superbar/static/description/index.html b/app_stock_superbar/static/description/index.html
index 74086550..b65e0bd7 100644
--- a/app_stock_superbar/static/description/index.html
+++ b/app_stock_superbar/static/description/index.html
@@ -75,7 +75,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in stock location.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo3.jpg">
         </div>
     </div>
@@ -84,7 +84,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in product.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo2.jpg">
         </div>
     </div>
@@ -93,7 +93,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo1.jpg">
         </div>
     </div>
@@ -103,7 +103,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in hr department.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo4.jpg">
         </div>
     </div>
@@ -112,7 +112,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in hr employee.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo5.jpg">
         </div>
     </div>
@@ -124,7 +124,7 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">(!Need extra module and pay, release soon)Easy to navigator.</h1>
         <h4 class="oe_slogan">Product, employee in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo11.jpg">
         </div>
     </div>
@@ -133,7 +133,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">(!Need extra module and pay, release soon)List view</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo12.jpg">
         </div>
     </div>
@@ -142,7 +142,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Easy to setup just use widget='widget_select'. like this</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="setup1.jpg">
         </div>
         <h1><br/> Use follow param to setup widget:<br/></h1>
diff --git a/app_stock_ztree/static/description/index.html b/app_stock_ztree/static/description/index.html
index 74086550..b65e0bd7 100644
--- a/app_stock_ztree/static/description/index.html
+++ b/app_stock_ztree/static/description/index.html
@@ -75,7 +75,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in stock location.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo3.jpg">
         </div>
     </div>
@@ -84,7 +84,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in product.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo2.jpg">
         </div>
     </div>
@@ -93,7 +93,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo1.jpg">
         </div>
     </div>
@@ -103,7 +103,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in hr department.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo4.jpg">
         </div>
     </div>
@@ -112,7 +112,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in hr employee.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo5.jpg">
         </div>
     </div>
@@ -124,7 +124,7 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">(!Need extra module and pay, release soon)Easy to navigator.</h1>
         <h4 class="oe_slogan">Product, employee in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo11.jpg">
         </div>
     </div>
@@ -133,7 +133,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">(!Need extra module and pay, release soon)List view</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo12.jpg">
         </div>
     </div>
@@ -142,7 +142,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Easy to setup just use widget='widget_select'. like this</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="setup1.jpg">
         </div>
         <h1><br/> Use follow param to setup widget:<br/></h1>
diff --git a/app_users_zchart/static/description/index.html b/app_users_zchart/static/description/index.html
index de97a5cb..7bcd7a5a 100644
--- a/app_users_zchart/static/description/index.html
+++ b/app_users_zchart/static/description/index.html
@@ -53,7 +53,7 @@
             </a>
         </h1>
         <div class="oe_demo">
-            <img class="oe_demo oe_screenshot" src="banner.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="banner.gif">
         </div>
 
             <div class="alert alert-info" style="padding:8px;font-weight: 300; font-size: 20px;">
@@ -89,15 +89,15 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">MRP Production Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo1.jpg">
         </div>
         <h4 class="oe_slogan">If we have a multi Bom like follow:</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_bom.jpg">
         </div>
         <h4 class="oe_slogan">Show sub manufacture order and quick access sub MO</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_mo.jpg">
         </div>
     </div>
@@ -107,11 +107,11 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">Product category Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo1.jpg">
         </div>
         <h4 class="oe_slogan">Show sub category and quick access category</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo2.jpg">
         </div>
     </div>
@@ -120,7 +120,7 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">Stock Location Chart Hierarchy</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo4.jpg">
         </div>
     </div>
@@ -130,7 +130,7 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">User Alliance Distribution Multi level</h1>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo9.jpg">
         </div>
     </div>
@@ -139,11 +139,11 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Easy to setup just use widget='ztree_chart'. like this</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="setup1.jpg">
         </div>
         <h4 class="oe_slogan">Also need to change view for better ui</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="setup2.jpg">
         </div>
         <h1><br/> Use follow param to setup widget:<br/></h1>
diff --git a/app_web_enterprise/static/description/index.html b/app_web_enterprise/static/description/index.html
index 045294f2..65d249e0 100644
--- a/app_web_enterprise/static/description/index.html
+++ b/app_web_enterprise/static/description/index.html
@@ -15,19 +15,19 @@
                 </ul>
             </div>
 
-            <div class="oe_demo oe_screenshot mt32">
+            <div class="oe_demo oe_screenshot img img-fluid mt32">
                 <img src="app_web_enterprise_01.jpg" style="border:1px solid black"/>
                 <br/>
             </div>
-            <div class="oe_demo oe_screenshot mt32">
+            <div class="oe_demo oe_screenshot img img-fluid mt32">
                 <img src="app_web_enterprise_02.jpg" style="border:1px solid black"/>
                 <br/>
             </div>
-            <div class="oe_demo oe_screenshot mt32">
+            <div class="oe_demo oe_screenshot img img-fluid mt32">
                 <img src="app_web_enterprise_03.jpg" style="border:1px solid black"/>
                 <br/>
             </div>
-            <div class="oe_demo oe_screenshot mt32">
+            <div class="oe_demo oe_screenshot img img-fluid mt32">
                 <img src="b03.png" style="border:1px solid black"/>
                 <br/>
             </div>
@@ -37,7 +37,7 @@
                      style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%;">
                     <h2 class='oe_mt32'>Customize Module Url(eg. Enterprise).</h2>
                 </div>
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="set21.jpg" style="border:1px solid black"/>
                     <br/>
                 </div>
diff --git a/app_web_fullwidth/static/description/index.html b/app_web_fullwidth/static/description/index.html
index 2076156f..a7cfd28c 100644
--- a/app_web_fullwidth/static/description/index.html
+++ b/app_web_fullwidth/static/description/index.html
@@ -30,7 +30,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%;">
             <h2 class='oe_mt32'>Small screen. With or without this module</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_s.png" style="border:1px solid black"/>
             <br/>
         </div>
@@ -40,7 +40,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%;">
             <h2 class='oe_mt32'>Medium screen. With or without this module</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_m.png" style="border:1px solid black"/>
             <br/>
         </div>
@@ -50,7 +50,7 @@
              style="margin: 20px auto; padding: 0 15px 0 0; border:none; border-top:solid 1px #dedede; width: 96%;">
             <h2 class='oe_mt32'>Large and extra large screen. Perfect for lots of columns.</h2>
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_l_1.jpg" style="border:1px solid black"/>
             <br/>
         </div>
diff --git a/app_website_product_superbar/static/description/index.html b/app_website_product_superbar/static/description/index.html
index 54e04443..e1ada9ef 100644
--- a/app_website_product_superbar/static/description/index.html
+++ b/app_website_product_superbar/static/description/index.html
@@ -6,7 +6,7 @@
 <section class="oe_container">
     <div class="oe_row">
         <div class="oe_demo">
-            <img class="oe_demo oe_screenshot" src="banner.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="banner.gif">
         </div>
         <h3 class="oe_slogan">Advance Search, Advance Filter with Parent Children Tree.</h3>
         <h1 class="text-danger text-center">Buy
@@ -135,8 +135,8 @@
         <h1>&nbsp;</h1>
         <h1 class="text-danger text-center">So Easy to navigator and search any data.</h1>
         <h4 class="oe_slogan">Product by category or type in kanban view</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="use.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="use.jpg"/>
         </div>
     </div>
 </section>
@@ -147,15 +147,15 @@
     <div class="oe_row oe_spaced">
         <h1>&nbsp;</h1>
         <h4 class="oe_slogan">Filter product or any data in search more windows</h4>
-        <div class="oe_demo oe_screenshot">
-            <img oe_demo oe_screenshot src="searchmore.jpg"/>
+        <div class="oe_demo oe_screenshot img img-fluid">
+            <img oe_demo oe_screenshot img img-fluid src="searchmore.jpg"/>
         </div>
     </div>
 </section>
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in product category.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="product1.jpg">
         </div>
     </div>
@@ -164,15 +164,15 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Free to Use in POS point of sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos1.jpg">
         </div>
         <h4 class="oe_slogan">POS product and order.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos2.jpg">
         </div>
         <h4 class="oe_slogan">POS report.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="pos3.jpg">
         </div>
     </div>
@@ -180,7 +180,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in HR employee.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="hr2.gif">
         </div>
     </div>
@@ -189,7 +189,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Account.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="account1.jpg">
         </div>
     </div>
@@ -198,7 +198,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in Sale.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="sale1.jpg">
         </div>
     </div>
@@ -207,7 +207,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in CRM.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="crm1.jpg">
         </div>
     </div>
@@ -216,7 +216,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in purchase.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="purchase1.jpg">
         </div>
     </div>
@@ -225,7 +225,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in MRP.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="mrp1.gif">
         </div>
     </div>
@@ -234,7 +234,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in stock.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="stock1.jpg">
         </div>
     </div>
@@ -243,7 +243,7 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Use in contacts.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="contacts1.jpg">
         </div>
     </div>
@@ -252,10 +252,10 @@
 <section class="oe_container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Apps Navigator by Category, Module Navigator is ready.</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module1.jpg">
         </div>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo_module2.jpg">
         </div>
     </div>
@@ -282,7 +282,7 @@
                 <h4 class="oe_slogan">Show superbar in list view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use7.jpg">
                 </div>
             </div>
@@ -290,7 +290,7 @@
                 <h4 class="oe_slogan">Show superbar in kanban view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use8.jpg">
                 </div>
             </div>
@@ -298,7 +298,7 @@
                 <h4 class="oe_slogan">Show superbar in pivot view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use9.jpg">
                 </div>
             </div>
@@ -306,7 +306,7 @@
                 <h4 class="oe_slogan">Show superbar in graph view.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="usea.jpg">
                 </div>
             </div>
@@ -314,7 +314,7 @@
                 <h4 class="oe_slogan">Click switch to show or hide superbar.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use1.jpg">
                 </div>
             </div>
@@ -322,7 +322,7 @@
                 <h4 class="oe_slogan">Click checkbox to set whether to show child nodes data.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use2.jpg">
                 </div>
             </div>
@@ -330,7 +330,7 @@
                 <h4 class="oe_slogan">Press Ctrl(Windows) / Cmd(Mac) to Select Multi Nodes</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use3.jpg">
                 </div>
             </div>
@@ -338,7 +338,7 @@
                 <h4 class="oe_slogan">Set multi field to search or filter</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use4.jpg">
                 </div>
             </div>
@@ -346,7 +346,7 @@
                 <h4 class="oe_slogan">Set super bar position, left or right.</h4>
             </div>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="use5.jpg">
                 </div>
             </div>
@@ -354,7 +354,7 @@
         <div class="oe_span12">
             <h4 class="oe_slogan oe_spaced">4. If you want to customize, Use follow param to setup widget(Extra pay for support):</h4>
             <div class="oe_span12">
-                <div class="oe_demo oe_screenshot">
+                <div class="oe_demo oe_screenshot img img-fluid">
                     <img src="superbar_use.gif">
                 </div>
                 <ul class="oe_spaced" style="padding:8px;font-weight: 300; font-size: 20px;">
diff --git a/l10n_cn_standard_latest/static/description/index.html b/l10n_cn_standard_latest/static/description/index.html
index 5ba0e413..a334faef 100644
--- a/l10n_cn_standard_latest/static/description/index.html
+++ b/l10n_cn_standard_latest/static/description/index.html
@@ -6,7 +6,7 @@
             <div class="oe_row">
                 <h3>Lastest update: v14.20.06.09</h3>
                 <div class="oe_span12">
-                    <img class="oe_demo oe_screenshot" src="banner.png">
+                    <img class="oe_demo oe_screenshot img img-fluid" src="banner.png">
                 </div>
                 <div class="oe_span12 oe_spaced">
                     <div class="alert alert-info" style="padding:8px;font-weight: 300; font-size: 20px;">
@@ -21,11 +21,11 @@
                 </div>
                 <h3 class="oe_slogan">Use super, easy to navigate account data.</h3>
                 <div class="oe_span12">
-                    <img class="oe_demo oe_screenshot" src="superbar1.png">
+                    <img class="oe_demo oe_screenshot img img-fluid" src="superbar1.png">
                 </div>
                 <h3 class="oe_slogan">How to use</h3>
                 <div class="oe_span12">
-                    <img class="oe_demo oe_screenshot" src="cnreadme.png">
+                    <img class="oe_demo oe_screenshot img img-fluid" src="cnreadme.png">
                 </div>
             </div>
         </div>