responsive fixes

build/css/custom.css

@@ -415,7 +415,7 @@ body .container-fluid.body .right_col {
 }
 
 .nav_title {
-    width: 230px;
+    width: auto;
     float: left;
     background: #2A3F54;
     border-radius: 0;
@@ -1270,7 +1270,8 @@ legend {
 }
 
 .profile_details .profile_view .ratings {
-    text-align: left;
+    /* TODO Commented text to be deleted */
+    /*text-align: left;*/
     font-size: 16px;
 }
 
@@ -2005,7 +2006,7 @@ a.user-profile {
 }
 
 ul.top_profiles {
-    height: 330px;
+    height: auto;
     width: 100%;
 }
 

build/js/custom.js

@@ -131,7 +131,7 @@ $(document).ready(function () {
                 }
 
             }
-            $('.main_container > .row > .right_col_wrapper').removeClass('col-lg-10 col-md-10').addClass('col-lg-11 col-md-11 col-10');
+            $('.main_container > .row > .right_col_wrapper').removeClass('col-lg-10 col-md-12').addClass('col-lg-11 col-md-11 col-10');
         } else {
             $SIDEBAR_MENU.find('li.active-sm ul').show();
             $SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
@@ -144,7 +144,7 @@ $(document).ready(function () {
                 }
 
             }
-            $('.main_container > .row > .right_col_wrapper').removeClass('col-lg-11 col-10 col-md-11').addClass('col-lg-10 col-md-10');
+            $('.main_container > .row > .right_col_wrapper').removeClass('col-lg-11 col-10 col-md-11').addClass('col-lg-10 col-md-12');
         }
 
         $BODY.toggleClass('nav-md nav-sm');
@@ -4321,7 +4321,7 @@ $(".bulk_action input").on("ifChecked", function () {
 }), "undefined" != typeof NProgress && ($(document).ready(function () {
     NProgress.start();
 }), $(window).on('load', function () {
-    // setTimeout fix for Firefox 
+    // setTimeout fix for Firefox
     setTimeout(function(){ NProgress.done() },100);
 }));
 var originalLeave = $.fn.popover.Constructor.prototype.leave;

production/calendar.html

@@ -177,7 +177,7 @@
                     <!-- /menu footer buttons -->
                 </div>
             </div>
-            <div class="col-lg-10 col-md-10 right_col_wrapper">
+            <div class="col-lg-10 col-md-12 right_col_wrapper">
                 <div class="row">
                     <!-- top navigation -->
                     <div class="col-lg-12 top_nav">

production/chartjs.html

@@ -174,7 +174,7 @@
                     <!-- menu footer buttons -->
                 </div>
             </div>
-            <div class="col-lg-10 col-md-10 right_col_wrapper">
+            <div class="col-lg-10 col-md-12 right_col_wrapper">
                 <div class="row">
                     <!-- top navigation -->
                     <div class="col-lg-12 top_nav">

production/chartjs2.html

@@ -174,7 +174,7 @@
                     <!-- /menu footer buttons -->
                 </div>
             </div>
-            <div class="col-lg-10 col-md-10 right_col_wrapper">
+            <div class="col-lg-10 col-md-12 right_col_wrapper">
                 <div class="row">
                     <!-- top navigation -->
                     <div class="col-lg-12 top_nav">

production/contacts.html

@@ -174,7 +174,7 @@
                     <!-- /menu footer buttons -->
                 </div>
             </div>
-            <div class="col-lg-10 col-md-10 right_col_wrapper">
+            <div class="col-lg-10 col-md-12 right_col_wrapper">
                 <div class="row">
                     <!-- top navigation -->
                     <div class="col-lg-12 top_nav">
@@ -327,7 +327,7 @@
                                                             <div class="col-sm-12">
                                                                 <h4 class="brief"><i>Digital Strategist</i></h4>
                                                                 <div class="row">
-                                                                    <div class="left col-md-7">
+                                                                    <div class="left col-lg-12 col-xl-7">
                                                                         <h2>Nicole Pearson</h2>
                                                                         <p><strong>About: </strong> Web Designer / UX /
                                                                             Graphic
@@ -339,7 +339,7 @@
                                                                             </li>
                                                                         </ul>
                                                                     </div>
-                                                                    <div class="right col-md-5 text-center">
+                                                                    <div class="right col-xl-5 col-lg-12 text-center">
                                                                         <img src="images/img.jpg" alt=""
                                                                              class="img-circle img-responsive">
                                                                     </div>
@@ -347,7 +347,7 @@
                                                             </div>
                                                             <div class="col-12 bottom text-center">
                                                                 <div class="row">
-                                                                    <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis text-center text-xl-left">
                                                                         <p class="ratings">
                                                                             <a>4.0</a>
                                                                             <a href="#"><span class="fa fa-star"></span></a>
@@ -358,7 +358,7 @@
                                                                                     class="fa fa-star-o"></span></a>
                                                                         </p>
                                                                     </div>
-                                                                    <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis mt-xl-0 mt-2">
                                                                         <button type="button"
                                                                                 class="btn btn-success btn-xs"><i
                                                                                 class="fa fa-user">
@@ -379,7 +379,7 @@
                                                             <div class="col-sm-12">
                                                                 <h4 class="brief"><i>Digital Strategist</i></h4>
                                                                 <div class="row">
-                                                                    <div class="left col-md-7">
+                                                                    <div class="left col-xl-7 col-lg-12">
                                                                         <h2>Nicole Pearson</h2>
                                                                         <p><strong>About: </strong> Web Designer / UI.
                                                                         </p>
@@ -390,7 +390,7 @@
                                                                             </li>
                                                                         </ul>
                                                                     </div>
-                                                                    <div class="right col-md-5 text-center">
+                                                                    <div class="right col-xl-5 col-lg-12 text-center">
                                                                         <img src="images/user.png" alt=""
                                                                              class="img-circle img-responsive">
                                                                     </div>
@@ -398,7 +398,7 @@
                                                             </div>
                                                             <div class="col-12 bottom text-center">
                                                                 <div class="row">
-                                                                    <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis text-center text-xl-left">
                                                                         <p class="ratings">
                                                                             <a>4.0</a>
                                                                             <a href="#"><span class="fa fa-star"></span></a>
@@ -409,7 +409,7 @@
                                                                                     class="fa fa-star-o"></span></a>
                                                                         </p>
                                                                     </div>
-                                                                    <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis mt-xl-0 mt-2">
                                                                         <button type="button"
                                                                                 class="btn btn-success btn-xs"><i
                                                                                 class="fa fa-user">
@@ -430,7 +430,7 @@
                                                             <div class="col-sm-12">
                                                                 <h4 class="brief"><i>Digital Strategist</i></h4>
                                                                 <div class="row">
-                                                                    <div class="left col-md-7">
+                                                                    <div class="left col-xl-7 col-lg-12">
                                                                         <h2>Nicole Pearson</h2>
                                                                         <p><strong>About: </strong> Web Designer / UI.
                                                                         </p>
@@ -441,7 +441,7 @@
                                                                             </li>
                                                                         </ul>
                                                                     </div>
-                                                                    <div class="right col-md-5 text-center">
+                                                                    <div class="right col-xl-5 col-lg-12 text-center">
                                                                         <img src="images/user.png" alt=""
                                                                              class="img-circle img-responsive">
                                                                     </div>
@@ -449,7 +449,7 @@
                                                             </div>
                                                             <div class="col-12 bottom text-center">
                                                                 <div class="row">
-                                                                    <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis text-center text-xl-left">
                                                                         <p class="ratings">
                                                                             <a>4.0</a>
                                                                             <a href="#"><span class="fa fa-star"></span></a>
@@ -460,7 +460,7 @@
                                                                                     class="fa fa-star-o"></span></a>
                                                                         </p>
                                                                     </div>
-                                                                    <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis mt-xl-0 mt-2">
                                                                         <button type="button"
                                                                                 class="btn btn-success btn-xs"><i
                                                                                 class="fa fa-user">
@@ -481,7 +481,7 @@
                                                             <div class="col-sm-12">
                                                                 <h4 class="brief"><i>Digital Strategist</i></h4>
                                                                 <div class="row">
-                                                                    <div class="left col-md-7">
+                                                                    <div class="left col-xl-7 col-lg-12">
                                                                         <h2>Nicole Pearson</h2>
                                                                         <p><strong>About: </strong> Web Designer / UI.
                                                                         </p>
@@ -492,7 +492,7 @@
                                                                             </li>
                                                                         </ul>
                                                                     </div>
-                                                                    <div class="right col-md-5 text-center">
+                                                                    <div class="right col-xl-5 col-lg-12 text-center">
                                                                         <img src="images/user.png" alt=""
                                                                              class="img-circle img-responsive">
                                                                     </div>
@@ -500,7 +500,7 @@
                                                             </div>
                                                             <div class="col-12 bottom text-center">
                                                                 <div class="row">
-                                                                    <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis text-center text-xl-left">
                                                                         <p class="ratings">
                                                                             <a>4.0</a>
                                                                             <a href="#"><span class="fa fa-star"></span></a>
@@ -511,7 +511,7 @@
                                                                                     class="fa fa-star-o"></span></a>
                                                                         </p>
                                                                     </div>
-                                                                    <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis mt-xl-0 mt-2">
                                                                         <button type="button"
                                                                                 class="btn btn-success btn-xs"><i
                                                                                 class="fa fa-user">
@@ -532,7 +532,7 @@
                                                             <div class="col-sm-12">
                                                                 <h4 class="brief"><i>Digital Strategist</i></h4>
                                                                 <div class="row">
-                                                                    <div class="left col-md-7">
+                                                                    <div class="left col-xl-7 col-lg-12">
                                                                         <h2>Nicole Pearson</h2>
                                                                         <p><strong>About: </strong> Web Designer / UX /
                                                                             Graphic
@@ -544,7 +544,7 @@
                                                                             </li>
                                                                         </ul>
                                                                     </div>
-                                                                    <div class="right col-md-5 text-center">
+                                                                    <div class="right col-xl-5 col-lg-12 text-center">
                                                                         <img src="images/img.jpg" alt=""
                                                                              class="img-circle img-responsive">
                                                                     </div>
@@ -552,7 +552,7 @@
                                                             </div>
                                                             <div class="col-12 bottom text-center">
                                                                 <div class="row">
-                                                                    <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis text-center text-xl-left">
                                                                         <p class="ratings">
                                                                             <a>4.0</a>
                                                                             <a href="#"><span class="fa fa-star"></span></a>
@@ -563,7 +563,7 @@
                                                                                     class="fa fa-star-o"></span></a>
                                                                         </p>
                                                                     </div>
-                                                                    <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis mt-xl-0 mt-2">
                                                                         <button type="button"
                                                                                 class="btn btn-success btn-xs"><i
                                                                                 class="fa fa-user">
@@ -584,7 +584,7 @@
                                                             <div class="col-sm-12">
                                                                 <h4 class="brief"><i>Digital Strategist</i></h4>
                                                                 <div class="row">
-                                                                    <div class="left col-md-7">
+                                                                    <div class="left col-xl-7 col-lg-12">
                                                                         <h2>Nicole Pearson</h2>
                                                                         <p><strong>About: </strong> Web Designer / UI.
                                                                         </p>
@@ -595,7 +595,7 @@
                                                                             </li>
                                                                         </ul>
                                                                     </div>
-                                                                    <div class="right col-md-5 text-center">
+                                                                    <div class="right col-xl-5 col-lg-12 text-center">
                                                                         <img src="images/user.png" alt=""
                                                                              class="img-circle img-responsive">
                                                                     </div>
@@ -603,7 +603,7 @@
                                                             </div>
                                                             <div class="col-12 bottom text-center">
                                                                 <div class="row">
-                                                                    <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis text-center text-xl-left">
                                                                         <p class="ratings">
                                                                             <a>4.0</a>
                                                                             <a href="#"><span class="fa fa-star"></span></a>
@@ -614,7 +614,7 @@
                                                                                     class="fa fa-star-o"></span></a>
                                                                         </p>
                                                                     </div>
-                                                                    <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis mt-xl-0 mt-2">
                                                                         <button type="button"
                                                                                 class="btn btn-success btn-xs"><i
                                                                                 class="fa fa-user">
@@ -635,7 +635,7 @@
                                                             <div class="col-sm-12">
                                                                 <h4 class="brief"><i>Digital Strategist</i></h4>
                                                                 <div class="row">
-                                                                    <div class="left col-md-7">
+                                                                    <div class="left col-xl-7 col-lg-12">
                                                                         <h2>Nicole Pearson</h2>
                                                                         <p><strong>About: </strong> Web Designer / UI.
                                                                         </p>
@@ -646,7 +646,7 @@
                                                                             </li>
                                                                         </ul>
                                                                     </div>
-                                                                    <div class="right col-md-5 text-center">
+                                                                    <div class="right col-xl-5 col-lg-12 text-center">
                                                                         <img src="images/user.png" alt=""
                                                                              class="img-circle img-responsive">
                                                                     </div>
@@ -654,7 +654,7 @@
                                                             </div>
                                                             <div class="col-12 bottom text-center">
                                                                 <div class="row">
-                                                                <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                <div class="col-12 col-xl-6 emphasis text-center text-xl-left">
                                                                     <p class="ratings">
                                                                         <a>4.0</a>
                                                                         <a href="#"><span class="fa fa-star"></span></a>
@@ -665,7 +665,7 @@
                                                                                 class="fa fa-star-o"></span></a>
                                                                     </p>
                                                                 </div>
-                                                                <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                <div class="col-12 col-xl-6 emphasis mt-xl-0 mt-2">
                                                                     <button type="button"
                                                                             class="btn btn-success btn-xs"><i
                                                                             class="fa fa-user">
@@ -686,7 +686,7 @@
                                                             <div class="col-sm-12">
                                                                 <h4 class="brief"><i>Digital Strategist</i></h4>
                                                                 <div class="row">
-                                                                    <div class="left col-md-7">
+                                                                    <div class="left col-xl-7 col-lg-12">
                                                                         <h2>Nicole Pearson</h2>
                                                                         <p><strong>About: </strong> Web Designer / UI.
                                                                         </p>
@@ -697,7 +697,7 @@
                                                                             </li>
                                                                         </ul>
                                                                     </div>
-                                                                    <div class="right col-md-5 text-center">
+                                                                    <div class="right col-xl-5 col-lg-12 text-center">
                                                                         <img src="images/user.png" alt=""
                                                                              class="img-circle img-responsive">
                                                                     </div>
@@ -705,7 +705,7 @@
                                                             </div>
                                                             <div class="col-md-12 bottom text-center">
                                                                 <div class="row">
-                                                                    <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis text-center text-xl-left">
                                                                         <p class="ratings">
                                                                             <a>4.0</a>
                                                                             <a href="#"><span class="fa fa-star"></span></a>
@@ -716,7 +716,7 @@
                                                                                     class="fa fa-star-o"></span></a>
                                                                         </p>
                                                                     </div>
-                                                                    <div class="col-12 col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis mt-xl-0 mt-2">
                                                                         <button type="button"
                                                                                 class="btn btn-success btn-xs"><i
                                                                                 class="fa fa-user">
@@ -737,7 +737,7 @@
                                                             <div class="col-sm-12">
                                                                 <h4 class="brief"><i>Digital Strategist</i></h4>
                                                                 <div class="row">
-                                                                    <div class="left col-md-7">
+                                                                    <div class="left col-xl-7 col-lg-12">
                                                                         <h2>Nicole Pearson</h2>
                                                                         <p><strong>About: </strong> Web Designer / UI.
                                                                         </p>
@@ -748,7 +748,7 @@
                                                                             </li>
                                                                         </ul>
                                                                     </div>
-                                                                    <div class="right col-md-5 text-center">
+                                                                    <div class="right col-xl-5 col-lg-12 text-center">
                                                                         <img src="images/user.png" alt=""
                                                                              class="img-circle img-responsive">
                                                                     </div>
@@ -756,7 +756,7 @@
                                                             </div>
                                                             <div class="col-md-12 bottom text-center">
                                                                 <div class="row">
-                                                                    <div class="col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis text-center text-xl-left">
                                                                         <p class="ratings">
                                                                             <a>4.0</a>
                                                                             <a href="#"><span class="fa fa-star"></span></a>
@@ -767,7 +767,7 @@
                                                                                     class="fa fa-star-o"></span></a>
                                                                         </p>
                                                                     </div>
-                                                                    <div class="col-sm-6 col-md-6 emphasis">
+                                                                    <div class="col-12 col-xl-6 emphasis mt-xl-0 mt-2">
                                                                         <button type="button"
                                                                                 class="btn btn-success btn-xs"><i
                                                                                 class="fa fa-user">

production/e_commerce.html

@@ -176,7 +176,7 @@
                     <!-- /menu footer buttons -->
                 </div>
             </div>
-            <div class="col-lg-10 col-md-10 right_col_wrapper">
+            <div class="col-lg-10 col-md-12 right_col_wrapper">
                 <div class="row">
                     <!-- top navigation -->
                     <div class="col-lg-12 top_nav">

production/echarts.html

@@ -174,7 +174,7 @@
                     <!-- /menu footer buttons -->
                 </div>
             </div>
-            <div class="col-lg-10 col-md-10 right_col_wrapper">
+            <div class="col-lg-10 col-md-12 right_col_wrapper">
                 <div class="row">
                     <!-- top navigation -->
                     <div class="col-lg-12 top_nav">

production/fixed_sidebar.html

@@ -232,7 +232,7 @@
                     <!-- /menu footer buttons -->
                 </div>
             </div>
-            <div class="offset-md-2 col-lg-10 col-md-10 right_col_wrapper">
+            <div class="offset-lg-2 col-lg-10 col-md-12 right_col_wrapper">
                 <div class="row">
                     <!-- top navigation -->
                     <div class="col-lg-12 top_nav">

production/form.html

@@ -187,7 +187,7 @@
                 </div>
             </div>
             <!-- right col -->
-            <div class="col-lg-10 col-md-10 right_col_wrapper">
+            <div class="col-lg-10 col-md-12 right_col_wrapper">
                 <div class="row">
                     <!-- top navigation -->
                     <div class="col-lg-12 top_nav">
@@ -416,7 +416,7 @@
                                                         </label>
                                                         <div class="col-md-6 col-sm-6 col-12">
                                                             <input id="birthday"
-                                                                   class="date-picker form-control col-md-7 col-12"
+                                                                   class="date-picker form-control col-md-7 col-sm-12"
                                                                    required="required" type="text">
                                                         </div>
                                                     </div>
@@ -538,7 +538,7 @@
                                                                     class="required">*</span>
                                                         </label>
                                                         <div class="col-md-9 col-sm-9 col-12">
-                                                            <input class="date-picker form-control col-md-7 col-12"
+                                                            <input class="date-picker form-control"
                                                                    required="required" type="text">
                                                         </div>
                                                     </div>