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

---
 .../static/description/index.html             | 42 ++++-----
 .../static/description/index.html             | 16 ++--
 app_ai_bard/static/description/index.html     | 40 ++++----
 app_auto_backup/static/description/index.html |  8 +-
 .../static/description/index.html             |  8 +-
 .../static/description/index.html             | 92 +++++++++----------
 app_chatgpt/static/description/index.html     | 40 ++++----
 app_common/static/description/index.html      |  8 +-
 .../static/description/index.html             | 42 ++++-----
 .../static/description/index.html             | 42 ++++-----
 app_hr_superbar/static/description/index.html | 44 ++++-----
 .../static/description/index.html             | 76 +++++++--------
 .../static/description/index.html             | 54 +++++------
 .../static/description/index.html             | 28 +++---
 .../static/description/index.html             | 54 +++++------
 .../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             | 18 ++--
 .../static/description/index.html             | 16 ++--
 .../static/description/index.html             | 12 +--
 .../static/description/index.html             |  6 +-
 .../static/description/index.html             |  6 +-
 .../static/description/index.html             |  6 +-
 .../static/description/index.html             | 58 ++++++------
 .../static/description/index.html             |  6 +-
 .../static/description/index.html             |  6 +-
 33 files changed, 556 insertions(+), 556 deletions(-)

diff --git a/app_account_superbar/static/description/index.html b/app_account_superbar/static/description/index.html
index a71dde0b..dd0d0d8f 100644
--- a/app_account_superbar/static/description/index.html
+++ b/app_account_superbar/static/description/index.html
@@ -32,7 +32,7 @@
 <section class="oe_container 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;">
@@ -99,15 +99,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/16.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/16.0/app_web_superbar/superbar.gif"/>
         </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>
@@ -116,15 +116,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>
@@ -132,7 +132,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>
@@ -141,7 +141,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>
@@ -150,7 +150,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>
@@ -159,7 +159,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>
@@ -186,7 +186,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>
@@ -194,7 +194,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>
@@ -202,7 +202,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>
@@ -210,7 +210,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>
@@ -218,7 +218,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>
@@ -226,7 +226,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>
@@ -234,7 +234,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>
@@ -242,7 +242,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>
@@ -250,7 +250,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>
@@ -258,7 +258,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_ztree/static/description/index.html b/app_account_ztree/static/description/index.html
index c102c6b3..c76f38d5 100644
--- a/app_account_ztree/static/description/index.html
+++ b/app_account_ztree/static/description/index.html
@@ -75,7 +75,7 @@
 <section class="oe_container 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 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 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 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 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 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 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_ai_bard/static/description/index.html b/app_ai_bard/static/description/index.html
index 357815b4..81cde9ad 100644
--- a/app_ai_bard/static/description/index.html
+++ b/app_ai_bard/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_auto_backup/static/description/index.html b/app_auto_backup/static/description/index.html
index e25decc3..86dd3850 100644
--- a/app_auto_backup/static/description/index.html
+++ b/app_auto_backup/static/description/index.html
@@ -6,7 +6,7 @@
             <h3 class="oe_slogan">A tool for all your back-ups, internal and external!</h3>
         </div>
 	<div class="oe_span6">
-            <div class="oe_demo oe_picture oe_screenshot">
+            <div class="oe_demo oe_picture oe_screenshot img img-fluid">
                     <img src="overview.png">
             </div>
         </div>
@@ -36,7 +36,7 @@
         </div>
         <div class="oe_span6">
             <div class="oe_row_img oe_centered">
-                <img class="oe_picture oe_screenshot" src="terminalssh.png">
+                <img class="oe_picture oe_screenshot img img-fluid" src="terminalssh.png">
             </div>
         </div>
     </div>
@@ -49,7 +49,7 @@
             <h3 class="oe_slogan">Checks your credentials in one click</h3>
         </div>
 	<div class="oe_span6">
-            <div class="oe_demo oe_picture oe_screenshot">
+            <div class="oe_demo oe_picture oe_screenshot img img-fluid">
                     <img src="testconnection.png">
 		    <img src="testconnectionfailed.png">
             </div>
@@ -74,7 +74,7 @@
         </div>
         <div class="oe_span6">
             <div class="oe_row_img oe_centered">
-                <img class="oe_picture oe_screenshot" src="emailnotification.png">
+                <img class="oe_picture oe_screenshot img img-fluid" src="emailnotification.png">
             </div>
         </div>
     </div>
diff --git a/app_base_chinese/static/description/index.html b/app_base_chinese/static/description/index.html
index ce076630..beb666c7 100644
--- a/app_base_chinese/static/description/index.html
+++ b/app_base_chinese/static/description/index.html
@@ -85,7 +85,7 @@
                     </div>
                 </div>
                 <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>
@@ -95,7 +95,7 @@
 <section class="oe_container container">
     <div class="oe_row oe_spaced">
         <h4 class="oe_slogan">Set the address format to chinese. Including all customer, supplier, users</h4>
-        <div class="oe_demo oe_screenshot">
+        <div class="oe_demo oe_screenshot img img-fluid">
             <img src="demo1.jpg">
         </div>
     </div>
@@ -105,7 +105,7 @@
 <section class="oe_container 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="demo2.jpg">
         </div>
     </div>
@@ -114,7 +114,7 @@
 <section class="oe_container 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 78315c0d..30a3ba93 100644
--- a/app_base_superbar/static/description/index.html
+++ b/app_base_superbar/static/description/index.html
@@ -16,34 +16,34 @@
 <section class="oe_container container">
     <div class="oe_row oe_spaced" style="max-width: 95%;">
         <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>
@@ -57,7 +57,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
@@ -217,8 +217,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>
@@ -226,7 +226,7 @@
 <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>
@@ -235,15 +235,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>
@@ -251,7 +251,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>
@@ -260,7 +260,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>
@@ -269,7 +269,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>
@@ -278,7 +278,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>
@@ -287,7 +287,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>
@@ -296,7 +296,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>
@@ -305,7 +305,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>
@@ -314,7 +314,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>
@@ -323,10 +323,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>
@@ -336,15 +336,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>
@@ -371,7 +371,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>
@@ -379,7 +379,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>
@@ -387,7 +387,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>
@@ -395,7 +395,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>
@@ -403,7 +403,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>
@@ -411,7 +411,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>
@@ -419,7 +419,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>
@@ -427,7 +427,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>
@@ -435,7 +435,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>
@@ -443,7 +443,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 cec13bf5..41bdb42e 100644
--- a/app_chatgpt/static/description/index.html
+++ b/app_chatgpt/static/description/index.html
@@ -10,11 +10,11 @@
                         <img class=""  src="bard.gif">
                         Add google bard support(search 'app_ai_bard'), 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;">
@@ -84,15 +84,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>
@@ -102,7 +102,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>
@@ -113,11 +113,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>
@@ -128,11 +128,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>
@@ -145,11 +145,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>
@@ -160,7 +160,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>
@@ -170,15 +170,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>
@@ -190,7 +190,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>
@@ -200,7 +200,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>
@@ -210,7 +210,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>
@@ -220,7 +220,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 e82d1ffb..8df2c52b 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: v16.22.02.02</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 f8fb4b3b..72785e06 100644
--- a/app_contacts_superbar/static/description/index.html
+++ b/app_contacts_superbar/static/description/index.html
@@ -31,7 +31,7 @@
 <section class="oe_container 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;">
@@ -98,15 +98,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/16.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/16.0/app_web_superbar/superbar.gif"/>
         </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>
@@ -115,15 +115,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>
@@ -131,7 +131,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>
@@ -140,7 +140,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>
@@ -149,7 +149,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>
@@ -158,7 +158,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>
@@ -185,7 +185,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>
@@ -193,7 +193,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>
@@ -201,7 +201,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>
@@ -209,7 +209,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>
@@ -217,7 +217,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>
@@ -225,7 +225,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>
@@ -233,7 +233,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>
@@ -241,7 +241,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>
@@ -249,7 +249,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>
@@ -257,7 +257,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_contacts_superbar_pro/static/description/index.html b/app_contacts_superbar_pro/static/description/index.html
index f8fb4b3b..72785e06 100644
--- a/app_contacts_superbar_pro/static/description/index.html
+++ b/app_contacts_superbar_pro/static/description/index.html
@@ -31,7 +31,7 @@
 <section class="oe_container 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;">
@@ -98,15 +98,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/16.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/16.0/app_web_superbar/superbar.gif"/>
         </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>
@@ -115,15 +115,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>
@@ -131,7 +131,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>
@@ -140,7 +140,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>
@@ -149,7 +149,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>
@@ -158,7 +158,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>
@@ -185,7 +185,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>
@@ -193,7 +193,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>
@@ -201,7 +201,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>
@@ -209,7 +209,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>
@@ -217,7 +217,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>
@@ -225,7 +225,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>
@@ -233,7 +233,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>
@@ -241,7 +241,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>
@@ -249,7 +249,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>
@@ -257,7 +257,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 f178fa7b..b33cf119 100644
--- a/app_hr_superbar/static/description/index.html
+++ b/app_hr_superbar/static/description/index.html
@@ -32,7 +32,7 @@
 <section class="oe_container 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>
         <div class="oe_span12 oe_spaced">
             <div class="alert alert-info" style="padding:8px;font-weight: 300; font-size: 20px;">
@@ -109,7 +109,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>
@@ -120,8 +120,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/16.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/16.0/app_web_superbar/superbar.gif"/>
         </div>
     </div>
 </section>
@@ -129,7 +129,7 @@
 <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>
@@ -138,15 +138,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>
@@ -154,7 +154,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>
@@ -163,7 +163,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>
@@ -172,7 +172,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>
@@ -181,7 +181,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>
@@ -208,7 +208,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>
@@ -216,7 +216,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>
@@ -224,7 +224,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>
@@ -232,7 +232,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>
@@ -240,7 +240,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>
@@ -248,7 +248,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>
@@ -256,7 +256,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>
@@ -264,7 +264,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>
@@ -272,7 +272,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>
@@ -280,7 +280,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_mail_superbar/static/description/index.html b/app_mail_superbar/static/description/index.html
index 4603bb4b..c52801ea 100644
--- a/app_mail_superbar/static/description/index.html
+++ b/app_mail_superbar/static/description/index.html
@@ -32,20 +32,20 @@
 <section class="oe_container container">
     <div class="oe_row oe_spaced" style="max-width: 95%;">
         <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>
@@ -59,7 +59,7 @@
 <section class="oe_container container">
     <div class="oe_row">
         <div class="oe_span12">
-            <img class="oe_demo oe_screenshot" src="http://www.odoo.com/apps/modules/16.0/app_web_superbar/superbar.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="http://www.odoo.com/apps/modules/16.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
@@ -215,8 +215,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>
@@ -224,7 +224,7 @@
 <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>
@@ -233,15 +233,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>
@@ -249,7 +249,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>
@@ -258,7 +258,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>
@@ -267,7 +267,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>
@@ -276,7 +276,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>
@@ -285,7 +285,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>
@@ -294,7 +294,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>
@@ -303,7 +303,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>
@@ -312,7 +312,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>
@@ -321,10 +321,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>
@@ -334,15 +334,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>
@@ -369,7 +369,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>
@@ -377,7 +377,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>
@@ -385,7 +385,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>
@@ -393,7 +393,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>
@@ -401,7 +401,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>
@@ -409,7 +409,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>
@@ -417,7 +417,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>
@@ -425,7 +425,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>
@@ -433,7 +433,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>
@@ -441,7 +441,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_superbar/static/description/index.html b/app_mrp_superbar/static/description/index.html
index a17c6e27..cbc1bf75 100644
--- a/app_mrp_superbar/static/description/index.html
+++ b/app_mrp_superbar/static/description/index.html
@@ -30,7 +30,7 @@
 <section class="oe_container 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">Easy to navigator and browse any data. Support list, kanban, pivot, graph view. </h3>
         <h2>Online demo <i class="fa fa-user text-primary"></i>  user/password: demo/demo
@@ -141,8 +141,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/16.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/16.0/app_web_superbar/superbar.gif"/>
         </div>
     </div>
 </section>
@@ -150,7 +150,7 @@
 <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>
@@ -159,15 +159,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>
@@ -175,7 +175,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>
@@ -184,7 +184,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>
@@ -193,7 +193,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>
@@ -202,7 +202,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>
@@ -211,7 +211,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>
@@ -220,7 +220,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>
@@ -229,7 +229,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>
@@ -238,7 +238,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>
@@ -247,10 +247,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>
@@ -277,7 +277,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>
@@ -285,7 +285,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>
@@ -293,7 +293,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>
@@ -301,7 +301,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>
@@ -309,7 +309,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>
@@ -317,7 +317,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>
@@ -325,7 +325,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>
@@ -333,7 +333,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>
@@ -341,7 +341,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>
@@ -349,7 +349,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_odoo_customize/static/description/index.html b/app_odoo_customize/static/description/index.html
index 76fc0c90..7024716a 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/16.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%;">
@@ -172,7 +172,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>
@@ -185,7 +185,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"/>
@@ -195,7 +195,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="set12.png" style="border:1px solid black"/>
             <br/>
         </div>
@@ -206,7 +206,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>
@@ -217,7 +217,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>
@@ -229,12 +229,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>
@@ -246,7 +246,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>
@@ -258,7 +258,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>
@@ -269,7 +269,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>
@@ -281,7 +281,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 f5ec96b6..63bda8a9 100644
--- a/app_pos_superbar/static/description/index.html
+++ b/app_pos_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>
@@ -166,7 +166,7 @@
 <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>
@@ -175,15 +175,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>
@@ -191,7 +191,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>
@@ -200,7 +200,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>
@@ -209,7 +209,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>
@@ -218,7 +218,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>
@@ -227,7 +227,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>
@@ -236,7 +236,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>
@@ -245,7 +245,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>
@@ -254,7 +254,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>
@@ -263,10 +263,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>
@@ -293,7 +293,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>
@@ -301,7 +301,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>
@@ -309,7 +309,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>
@@ -317,7 +317,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>
@@ -325,7 +325,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>
@@ -333,7 +333,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>
@@ -341,7 +341,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>
@@ -349,7 +349,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>
@@ -357,7 +357,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>
@@ -365,7 +365,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/static/description/index.html b/app_product_superbar/static/description/index.html
index 21ca504c..61305326 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 c936d07e..b4c35966 100644
--- a/app_product_superbar_pro/static/description/index.html
+++ b/app_product_superbar_pro/static/description/index.html
@@ -32,7 +32,7 @@
 <section class="oe_container container">
     <div class="oe_row">
         <div class="oe_span12">
-            <img class="oe_demo oe_screenshot" src="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar_pro/superbar_pro.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="//apps.odoocdn.com/apps/assets/16.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
@@ -252,8 +252,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/16.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/16.0/app_web_superbar_pro/searchmode.jpg"/>
         </div>
     </div>
 </section>
@@ -263,8 +263,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/16.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/16.0/app_web_superbar_pro/banner.png"/>
         </div>
     </div>
 </section>
@@ -275,8 +275,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/16.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/16.0/app_web_superbar/searchmore.jpg"/>
         </div>
     </div>
 </section>
@@ -284,11 +284,11 @@
 <section class="oe_container 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/16.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/16.0/app_web_superbar_pro/sale2.gif">
         </div>
     </div>
@@ -297,7 +297,7 @@
 <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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar_pro/product1.jpg">
         </div>
     </div>
@@ -306,15 +306,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="//apps.odoocdn.com/apps/assets/16.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/16.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/16.0/app_web_superbar/pos3.jpg">
         </div>
     </div>
@@ -323,7 +323,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/hr2.gif">
         </div>
     </div>
@@ -332,7 +332,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/account1.jpg">
         </div>
     </div>
@@ -341,7 +341,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/crm1.jpg">
         </div>
     </div>
@@ -350,7 +350,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/purchase1.jpg">
         </div>
     </div>
@@ -359,7 +359,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/mrp1.gif">
         </div>
     </div>
@@ -368,7 +368,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/stock1.jpg">
         </div>
     </div>
@@ -377,7 +377,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/contacts1.jpg">
         </div>
     </div>
@@ -386,10 +386,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/demo_module2.jpg">
         </div>
     </div>
@@ -399,15 +399,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/16.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/16.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/16.0/app_web_superbar/z_hr1.gif">
         </div>
     </div>
@@ -434,7 +434,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/16.0/app_web_superbar/use7.jpg">
                 </div>
             </div>
@@ -442,7 +442,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/16.0/app_web_superbar/searchmore.jpg">
                 </div>
             </div>
@@ -450,7 +450,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/16.0/app_web_superbar/use8.jpg">
                 </div>
             </div>
@@ -458,7 +458,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/16.0/app_web_superbar/use9.jpg">
                 </div>
             </div>
@@ -466,7 +466,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/16.0/app_web_superbar/usea.jpg">
                 </div>
             </div>
@@ -474,7 +474,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>
@@ -482,7 +482,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>
@@ -490,7 +490,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 a55c8927..01257f15 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 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 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 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 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 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 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 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 25e84192..81a32b17 100644
--- a/app_project_superbar/static/description/index.html
+++ b/app_project_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="mrp1.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="mrp1.gif">
         </div>
         <h1 class="text-danger text-center">Buy
             <a href="https://www.odoo.com/apps/modules/16.0/app_web_superbar/">
@@ -163,8 +163,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>
@@ -172,7 +172,7 @@
 <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>
@@ -181,15 +181,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>
@@ -197,7 +197,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>
@@ -206,7 +206,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>
@@ -215,11 +215,11 @@
 <section class="oe_container 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>
@@ -228,7 +228,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>
@@ -237,7 +237,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>
@@ -246,7 +246,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>
@@ -255,7 +255,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>
@@ -264,7 +264,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>
@@ -273,7 +273,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>
@@ -282,10 +282,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>
@@ -312,7 +312,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>
@@ -320,7 +320,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>
@@ -328,7 +328,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>
@@ -336,7 +336,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>
@@ -344,7 +344,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>
@@ -352,7 +352,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>
@@ -360,7 +360,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>
@@ -368,7 +368,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>
@@ -376,7 +376,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>
@@ -384,7 +384,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 0d72e043..07b020a5 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 efcc26ea..b9285453 100644
--- a/app_purchase_superbar/static/description/index.html
+++ b/app_purchase_superbar/static/description/index.html
@@ -32,7 +32,7 @@
 <section class="oe_container 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;">
@@ -99,15 +99,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 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>
@@ -116,15 +116,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>
@@ -132,7 +132,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>
@@ -141,7 +141,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>
@@ -150,7 +150,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>
@@ -159,7 +159,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>
@@ -186,7 +186,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>
@@ -194,7 +194,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>
@@ -202,7 +202,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>
@@ -210,7 +210,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>
@@ -218,7 +218,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>
@@ -226,7 +226,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>
@@ -234,7 +234,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>
@@ -242,7 +242,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>
@@ -250,7 +250,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>
@@ -258,7 +258,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 7758ab6d..47fdaa2a 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 d94636b3..9bff48a2 100644
--- a/app_sale_superbar/static/description/index.html
+++ b/app_sale_superbar/static/description/index.html
@@ -32,7 +32,7 @@
 <section class="oe_container 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;">
@@ -99,15 +99,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 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>
@@ -116,15 +116,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>
@@ -132,7 +132,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>
@@ -141,7 +141,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>
@@ -150,7 +150,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>
@@ -159,7 +159,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>
@@ -186,7 +186,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>
@@ -194,7 +194,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>
@@ -202,7 +202,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>
@@ -210,7 +210,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>
@@ -218,7 +218,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>
@@ -226,7 +226,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>
@@ -234,7 +234,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>
@@ -242,7 +242,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>
@@ -250,7 +250,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>
@@ -258,7 +258,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 b2e199ba..030385d1 100644
--- a/app_sale_superbar_pro/static/description/index.html
+++ b/app_sale_superbar_pro/static/description/index.html
@@ -32,7 +32,7 @@
 <section class="oe_container container">
     <div class="oe_row">
         <div class="oe_span12">
-            <img class="oe_demo oe_screenshot" src="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar_pro/superbar_pro.gif">
+            <img class="oe_demo oe_screenshot img img-fluid" src="//apps.odoocdn.com/apps/assets/16.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
@@ -252,8 +252,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/16.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/16.0/app_web_superbar_pro/searchmode.jpg"/>
         </div>
     </div>
 </section>
@@ -263,8 +263,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/16.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/16.0/app_web_superbar_pro/banner.png"/>
         </div>
     </div>
 </section>
@@ -275,8 +275,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/16.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/16.0/app_web_superbar/searchmore.jpg"/>
         </div>
     </div>
 </section>
@@ -284,11 +284,11 @@
 <section class="oe_container 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/16.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/16.0/app_web_superbar_pro/sale2.gif">
         </div>
     </div>
@@ -297,7 +297,7 @@
 <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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar_pro/product1.jpg">
         </div>
     </div>
@@ -306,15 +306,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="//apps.odoocdn.com/apps/assets/16.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/16.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/16.0/app_web_superbar/pos3.jpg">
         </div>
     </div>
@@ -323,7 +323,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/hr2.gif">
         </div>
     </div>
@@ -332,7 +332,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/account1.jpg">
         </div>
     </div>
@@ -341,7 +341,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/crm1.jpg">
         </div>
     </div>
@@ -350,7 +350,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/purchase1.jpg">
         </div>
     </div>
@@ -359,7 +359,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/mrp1.gif">
         </div>
     </div>
@@ -368,7 +368,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/stock1.jpg">
         </div>
     </div>
@@ -377,7 +377,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/contacts1.jpg">
         </div>
     </div>
@@ -386,10 +386,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="//apps.odoocdn.com/apps/assets/16.0/app_web_superbar/demo_module2.jpg">
         </div>
     </div>
@@ -399,15 +399,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/16.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/16.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/16.0/app_web_superbar/z_hr1.gif">
         </div>
     </div>
@@ -434,7 +434,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/16.0/app_web_superbar/use7.jpg">
                 </div>
             </div>
@@ -442,7 +442,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/16.0/app_web_superbar/searchmore.jpg">
                 </div>
             </div>
@@ -450,7 +450,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/16.0/app_web_superbar/use8.jpg">
                 </div>
             </div>
@@ -458,7 +458,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/16.0/app_web_superbar/use9.jpg">
                 </div>
             </div>
@@ -466,7 +466,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/16.0/app_web_superbar/usea.jpg">
                 </div>
             </div>
@@ -474,7 +474,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>
@@ -482,7 +482,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>
@@ -490,7 +490,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_picking_product_multi_add/static/description/index.html b/app_stock_picking_product_multi_add/static/description/index.html
index 5af05616..583b9d29 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 e978a385..611ff3a8 100644
--- a/app_stock_superbar/static/description/index.html
+++ b/app_stock_superbar/static/description/index.html
@@ -99,7 +99,7 @@
 <section class="oe_container 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>
@@ -108,7 +108,7 @@
 <section class="oe_container 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>
@@ -117,7 +117,7 @@
 <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="demo1.jpg">
         </div>
     </div>
@@ -127,7 +127,7 @@
 <section class="oe_container 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>
@@ -136,7 +136,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="demo5.jpg">
         </div>
     </div>
@@ -148,7 +148,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>
@@ -157,7 +157,7 @@
 <section class="oe_container 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>
@@ -166,7 +166,7 @@
 <section class="oe_container 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_web_enterprise/static/description/index.html b/app_web_enterprise/static/description/index.html
index 4085018c..e7606d33 100644
--- a/app_web_enterprise/static/description/index.html
+++ b/app_web_enterprise/static/description/index.html
@@ -16,24 +16,24 @@
                 </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>
 
-            <div class="oe_demo oe_screenshot mt32">
+            <div class="oe_demo oe_screenshot img img-fluid mt32">
                 <img src="b04.png" style="border:1px solid black"/>
                 <br/>
             </div>
@@ -43,7 +43,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 a468d560..c9d2abed 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_blog_editor/static/description/index.html b/app_website_blog_editor/static/description/index.html
index 9dc5317d..ed6d648e 100644
--- a/app_website_blog_editor/static/description/index.html
+++ b/app_website_blog_editor/static/description/index.html
@@ -6,7 +6,7 @@
             <div class="oe_row">
                 <h3>Lastest update: v13.23.03.23</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">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>
@@ -50,7 +50,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_website_blog_superbar/static/description/index.html b/app_website_blog_superbar/static/description/index.html
index 59a65401..dec2920c 100644
--- a/app_website_blog_superbar/static/description/index.html
+++ b/app_website_blog_superbar/static/description/index.html
@@ -37,7 +37,7 @@
             <div class="oe_row">
                 <h3>Lastest update: v13.23.03.23</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;">
@@ -71,7 +71,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>
@@ -81,7 +81,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_website_product_superbar/static/description/index.html b/app_website_product_superbar/static/description/index.html
index 7a07505f..235fa735 100644
--- a/app_website_product_superbar/static/description/index.html
+++ b/app_website_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
@@ -161,8 +161,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>
@@ -173,15 +173,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>
@@ -190,15 +190,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>
@@ -206,7 +206,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>
@@ -215,7 +215,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>
@@ -224,7 +224,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>
@@ -233,7 +233,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>
@@ -242,7 +242,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>
@@ -251,7 +251,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>
@@ -260,7 +260,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>
@@ -269,7 +269,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>
@@ -278,10 +278,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>
@@ -308,7 +308,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>
@@ -316,7 +316,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>
@@ -324,7 +324,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>
@@ -332,7 +332,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>
@@ -340,7 +340,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>
@@ -348,7 +348,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>
@@ -356,7 +356,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>
@@ -364,7 +364,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>
@@ -372,7 +372,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>
@@ -380,7 +380,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_website_sale_editor/static/description/index.html b/app_website_sale_editor/static/description/index.html
index 9dc5317d..ed6d648e 100644
--- a/app_website_sale_editor/static/description/index.html
+++ b/app_website_sale_editor/static/description/index.html
@@ -6,7 +6,7 @@
             <div class="oe_row">
                 <h3>Lastest update: v13.23.03.23</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">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>
@@ -50,7 +50,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/l10n_cn_standard_latest/static/description/index.html b/l10n_cn_standard_latest/static/description/index.html
index 34074913..f83f35ef 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: v16.23.02.14</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>