responsive ctegory

packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss

@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500");
 //shop variables
 $font-color: #242424;
 $border-color: #E8E8E8;

packages/Webkul/Shop/src/Resources/assets/sass/app.scss

@@ -1,9 +1,8 @@
-@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500");
 @import "variables";
 @import "icons";
 @import "mixins";
-@import "override";
 @import "components";
+@import "override";
 
 //main store front layouting
 .main-container-wrapper {
@@ -181,6 +180,33 @@ section.slider-block {
     }
 }
 
+//responsive css for slider
+@media only screen and (max-width: 770px) {
+
+    section.slider-block {
+
+        div.slider-content {
+
+            div.slider-control {
+                display: flex;
+                justify-content:space-between;
+                bottom: 48%;
+                right: 0%;
+                width:100%;
+
+                .dark-left-icon {
+                   margin-left: 15px;
+                }
+
+                .light-right-icon {
+                   margin-right: 15px;
+                }
+            }
+        }
+    }
+
+}
+
 //header navigation
 .header {
     margin-top: 16px;
@@ -460,6 +486,54 @@ section.slider-block {
     }
 }
 
+//header page responsive css start here
+@media only screen and (max-width: 770px) {
+
+    .header {
+
+        .header-top {
+
+            div.left-content {
+
+                ul.search-container {
+                    li.search-group {
+                        display: none;
+                    }
+                }
+            }
+
+            div.right-content {
+                display: none;
+            }
+
+            .right-responsive {
+                display: inherit;
+            }
+        }
+
+
+        .header-bottom {
+            border-bottom: none;
+            display: none;
+
+            .nav > li {
+                float: none;
+                height: 48px;
+                border-bottom: 1px solid $border-color;
+            }
+
+            .nav > li:last-child {
+                float:none;
+            }
+
+            .nav > li:last-child img {
+                margin-left: 10px;
+            }
+        }
+    }
+
+}
+
 //footer responsive with out media query.
 .footer {
     background-color: #f2f2f2;
@@ -540,13 +614,13 @@ section.slider-block {
 
 //category page
 .main {
-    .category-block {
+    .category-container {
         display: flex;
         flex-direction: row;
         width: 100%;
 
         .category-block {
-            width: 100%;
+            width: 80%;
             display: block;
 
             .hero-image {
@@ -1458,6 +1532,44 @@ section.cart {
 }
 // checkout ends here
 
+// checkout responsive start here
+@media only screen and (max-width: 770px) {
+
+    .checkout-process {
+        .col-main {
+            width: 100%;
+            padding-right: 0px;
+
+            ul.checkout-steps{
+                border-bottom: none;
+
+                span {
+                    display: none;
+                }
+
+                .line{
+                    flex-grow: 1;
+                    border-bottom: 1px solid $border-color;
+                    margin-left: 5px;
+                    margin-right: 5px;
+                }
+            }
+        }
+
+        .step-content {
+            .control-group .control {
+                width:100%;
+            }
+        }
+
+        .col-right {
+            display: none;
+        }
+    }
+
+}
+// checkout responsive end here
+
 .attached-products-wrapper {
     margin-bottom: 80px;
 

packages/Webkul/Shop/src/Resources/assets/sass/components.scss

@@ -7,19 +7,10 @@
     grid-auto-rows: auto;
 }
 
-.product-grid-3 {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(240px, 1fr));
-    grid-column-gap: 27px;
-    grid-row-gap: 15px;
-    grid-auto-rows: auto;
-}
-
 @media only screen and (max-width: 854px) {
     .product-grid-4 {
         grid-template-columns: 30% 30% 30%;
         grid-column-gap: 35px;
-
     }
 }
 
@@ -29,11 +20,25 @@
         grid-column-gap: 17px;
     }
 
-    .addtocart {
-        font-size: 0.71rem;
+    .product-card {
+
+        .cart-fav-seg {
+            font-size: 0.71rem;
+            justify-content: space-between;
+        }
     }
+
 }
 
+.product-grid-3 {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    grid-column-gap: 27px;
+    grid-row-gap: 15px;
+    grid-auto-rows: auto;
+}
+
+
 .product-card {
 
     .product-image {
@@ -80,8 +85,6 @@
     .cart-fav-seg {
         display: inline-flex;
         width: 100%;
-        align-items: center;
-        justify-content: space-between;
 
         .addtocart {
             border-radius: 0px;
@@ -199,4 +202,4 @@
             }
         }
     }
-}
+}

packages/Webkul/Shop/src/Resources/assets/sass/override.scss

@@ -121,4 +121,76 @@ body {
 
 .mt-90 {
     margin-top: 90px;
-}
+}
+
+@media only screen and (max-width: 551px) {
+    .product-grid-3 {
+        grid-template-columns: 48.5% 48.5%;
+        grid-column-gap: 20px;
+    }
+}
+
+@media only screen and (max-width: 840px) {
+
+    .layered-filter-wrapper{
+        display: none;
+    }
+
+    .main {
+
+        .category-block {
+            width: 100% !important;
+
+            .top-toolbar {
+                border-bottom: 1px solid $border-color;
+
+                .page-info {
+
+                    span:first-child {
+                        display: none;
+                    }
+
+                    span:last-child {
+                        display: inline;
+                    }
+                }
+
+                .pager {
+
+                    .view-mode {
+                        margin-right: 0px;
+
+                        .grid-view , .list-view {
+                            display: none;
+                        }
+
+                        .sort-filter {
+                            display: inline-block;
+                            margin-top: 10px;
+                        }
+                    }
+
+                    .sorter , .limiter{
+                        display: none;
+                    }
+                }
+            }
+        }
+
+
+    }
+
+}
+
+// @media only screen and (max-width: 660px) {
+//     .product-grid-3 {
+//         grid-template-columns: 48.5% 48.5%;
+//         grid-column-gap: 20px;
+//     }
+// }
+
+// @media only screen and (max-width: 480px) {
+//     .product-grid-3 {
+//         grid-template-columns: 47.5% 47.5%;
+//     }
+// }

packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php

@@ -22,17 +22,23 @@
                         <div class="decorator address-info"></div>
                         <span>{{ __('shop::app.checkout.onepage.information') }}</span>
                     </li>
-                    
+
+                    <div class="line mb-25"></div>
+
                     <li :class="[currentStep == 2 || completedStep > 1 ? 'active' : '', completedStep > 1 ? 'completed' : '']" @click="navigateToStep(2)">
                         <div class="decorator shipping"></div>
                         <span>{{ __('shop::app.checkout.onepage.shipping') }}</span>
                     </li>
-                    
+
+                    <div class="line mb-25"></div>
+
                     <li :class="[currentStep == 3 || completedStep > 2 ? 'active' : '', completedStep > 2 ? 'completed' : '']" @click="navigateToStep(3)">
                         <div class="decorator payment"></div>
                         <span>{{ __('shop::app.checkout.onepage.payment') }}</span>
                     </li>
-                    
+
+                    <div class="line mb-25"></div>
+
                     <li :class="[currentStep == 4 ? 'active' : '']">
                         <div class="decorator review"></div>
                         <span>{{ __('shop::app.checkout.onepage.complete') }}</span>

packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php

@@ -133,9 +133,7 @@
 
 </div>
 
-
-
-@push('scripts')
+{{--  @push('scripts')
 
     <script>
 
@@ -184,11 +182,9 @@
                     nav.style.display = 'none';
                     document.body.style.overflow = "scroll";
                 }
-
-
             }
         }
 
     </script>
 
-@endpush
+@endpush  --}}

packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php

@@ -35,31 +35,6 @@
 
         </div>
 
-        {{--  <div class="search-suggestion">
-
-            <div class="control-group">
-                <span class="icon search-icon"></span>
-                <input type="text" class="control" placeholder="Saress India">
-                <span class="icon icon-menu-back right"></span>
-            </div>
-
-            <div class="suggestion">
-                <span>Designer sarees</span>
-            </div>
-            <div class="suggestion">
-                <span>India patter sarees</span>
-            </div>
-            <div class="suggestion">
-                <span>Border Sarees</span>
-            </div>
-
-        </div>
-
-        <div class="nav-responsive">
-            @include('shop::layouts.header.nav-menu.navmenu')
-        </div>  --}}
-
-
         @include('shop::layouts.footer')
 
     </div>

packages/Webkul/Shop/src/Resources/views/products/index.blade.php

@@ -6,7 +6,7 @@
 
     <div class="main">
 
-        <div class="category-block">
+        <div class="category-container">
             @include ('shop::products.list.layered-navigation')
 
             <div class="category-block">
@@ -53,86 +53,3 @@
     </div>
 
 @stop
-
-
-@push('scripts')
-
-<script>
-
-    window.onload = function() {
-
-        var sort = document.getElementById("sort");
-        var filter = document.getElementById("filter");
-
-        sort.addEventListener("click", filterSort);
-        filter.addEventListener("click", filterSort);
-
-        function filterSort(){
-
-            let className = document.getElementById(this.id).className;
-            var productGrid = document.getElementsByClassName('product-grid max-3-col');
-            var filterLayered = document.getElementsByClassName('layered-filter-wrapper');
-            var sortLimiter = document.getElementsByClassName('reponsive-sorter-limiter');
-
-            if(className === 'icon filter-icon'){
-
-                for(let i=0 ; i < filterLayered.length ; i++){
-                    filterLayered[i].style.display="block";
-                    filterLayered[i].style.padding="20px";
-                    filterLayered[i].style.width="100%";
-
-                }
-
-                for(let i=0 ; i < sortLimiter.length ; i++){
-                    sortLimiter[i].style.display = "none";
-                }
-
-                filter.classList.remove('icon', 'filter-icon');
-                filter.classList.add('icon', 'cross-icon');
-                sort.classList.remove('icon', 'cross-icon');
-                sort.classList.remove('icon', 'sort-icon');
-                sort.classList.add('icon', 'sort-icon');
-
-            }else if(className === 'icon sort-icon'){
-
-                for(let i=0 ; i < filterLayered.length ; i++){
-                    filterLayered[i].style.display="none";
-                }
-                for(let i=0 ; i < sortLimiter.length ; i++){
-                    sortLimiter[i].style.display = "flex";
-                    sortLimiter[i].style.justifyContent = "space-between";
-                    sortLimiter[i].style.marginBottom = "20px";
-                }
-
-                sort.classList.remove('icon', 'sort-icon');
-                sort.classList.add('icon', 'cross-icon');
-                filter.classList.remove('icon', 'cross-icon');
-                filter.classList.remove('icon', 'filter-icon');
-                filter.classList.add('icon', 'filter-icon');
-
-            }else {
-
-                for(let i=0 ; i < productGrid.length ; i++){
-                    productGrid[i].style.display = "grid";
-                }
-                for(let i=0 ; i < filterLayered.length ; i++){
-                    filterLayered[i].style.display="none";
-                }
-                for(let i=0 ; i < sortLimiter.length ; i++){
-                    sortLimiter[i].style.display = "none";
-                }
-
-                sort.classList.remove('icon', 'cross-icon');
-                filter.classList.remove('icon', 'cross-icon');
-                sort.classList.remove('icon', 'sort-icon');
-                filter.classList.remove('icon', 'filter-icon');
-                sort.classList.add('icon', 'sort-icon');
-                filter.classList.add('icon', 'filter-icon');
-            }
-        }
-
-    }
-
-</script>
-
-@endpush

packages/Webkul/Shop/src/Resources/views/products/list/toolbar.blade.php

@@ -34,11 +34,8 @@
             @endif
 
             <div class="sort-filter">
-
                 <i class="icon sort-icon" id="sort" ></i>
-
                 <i class="icon filter-icon" id="filter"></i>
-
             </div>
 
         </div>

public/themes/default/assets/css/shop.css

@@ -73,6 +73,200 @@
   height: 32px;
 }
 
+.product-grid-4 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-column-gap: 45px;
+  grid-row-gap: 15px;
+  grid-auto-rows: auto;
+}
+
+@media only screen and (max-width: 854px) {
+  .product-grid-4 {
+    grid-template-columns: 30% 30% 30%;
+    grid-column-gap: 35px;
+  }
+}
+
+@media only screen and (max-width: 550px) {
+  .product-grid-4 {
+    grid-template-columns: 48.5% 48.5%;
+    grid-column-gap: 17px;
+  }
+  .product-card .cart-fav-seg {
+    font-size: 0.71rem;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+}
+
+.product-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-column-gap: 27px;
+  grid-row-gap: 15px;
+  grid-auto-rows: auto;
+}
+
+.product-card .product-image {
+  max-height: 350px;
+  max-width: 280px;
+  margin-bottom: 10px;
+  background: #F2F2F2;
+}
+
+.product-card .product-image img {
+  display: block;
+  width: 100%;
+}
+
+.product-card .product-name {
+  margin-bottom: 14px;
+  width: 100%;
+  color: #242424;
+}
+
+.product-card .product-name a {
+  color: #242424;
+}
+
+.product-card .product-description {
+  margin-bottom: 14px;
+  display: none;
+}
+
+.product-card .product-ratings {
+  width: 100%;
+  margin-bottom: 14px;
+}
+
+.product-card .product-ratings .icon {
+  width: 16px;
+  height: 16px;
+}
+
+.product-card .product-ratings .total-reviews {
+  display: none;
+}
+
+.product-card .cart-fav-seg {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: 100%;
+}
+
+.product-card .cart-fav-seg .addtocart {
+  border-radius: 0px;
+  margin-right: 10px;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.product-price {
+  margin-bottom: 14px;
+  width: 100%;
+  font-weight: 600;
+}
+
+.product-price .price-label {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.product-price .regular-price {
+  color: #A5A5A5;
+  text-decoration: line-through;
+  margin-right: 10px;
+}
+
+.product-price .special-price {
+  color: #FF6472;
+}
+
+.layered-filter-wrapper {
+  width: 25%;
+  float: left;
+  padding-right: 20px;
+  min-height: 1px;
+}
+
+.layered-filter-wrapper .filter-title {
+  border-bottom: 1px solid #E8E8E8;
+  color: #242424;
+  padding: 10px 0;
+}
+
+.layered-filter-wrapper .filter-attributes .filter-attributes-item {
+  border-bottom: 1px solid #E8E8E8;
+  padding-bottom: 10px;
+}
+
+.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title {
+  padding: 10px 40px 0 10px;
+  color: #5E5E5E;
+  cursor: pointer;
+  position: relative;
+}
+
+.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title .remove-filter-link {
+  font-weight: 400;
+  color: #0041FF;
+  margin-right: 10px;
+}
+
+.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title .icon {
+  background-image: url("../images/arrow-down.svg") !important;
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  right: 15px;
+  top: 14px;
+}
+
+.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content {
+  padding: 10px;
+  display: none;
+}
+
+.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items {
+  padding: 0;
+  margin: 0;
+  list-style: none none;
+}
+
+.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item {
+  padding: 8px 0;
+  color: #5E5E5E;
+}
+
+.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox {
+  margin: 0;
+}
+
+.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox .checkbox-view {
+  height: 16px;
+  width: 16px;
+  background-image: url("../images/checkbox.svg");
+}
+
+.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox input:checked + .checkbox-view {
+  background-image: url("../images/checkbox-checked.svg");
+}
+
+.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content .price-range-wrapper {
+  margin-top: 21px;
+}
+
+.layered-filter-wrapper .filter-attributes .filter-attributes-item.active .filter-attributes-content {
+  display: block;
+}
+
+.layered-filter-wrapper .filter-attributes .filter-attributes-item.active .filter-attributes-title .icon {
+  background-image: url("../images//arrow-up.svg") !important;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -195,201 +389,42 @@ body {
   margin-top: 90px;
 }
 
-.product-grid-4 {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  grid-column-gap: 45px;
-  grid-row-gap: 15px;
-  grid-auto-rows: auto;
-}
-
-.product-grid-3 {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(240px, 1fr));
-  grid-column-gap: 27px;
-  grid-row-gap: 15px;
-  grid-auto-rows: auto;
-}
-
-@media only screen and (max-width: 854px) {
-  .product-grid-4 {
-    grid-template-columns: 30% 30% 30%;
-    grid-column-gap: 35px;
-  }
-}
-
-@media only screen and (max-width: 550px) {
-  .product-grid-4 {
+@media only screen and (max-width: 551px) {
+  .product-grid-3 {
     grid-template-columns: 48.5% 48.5%;
-    grid-column-gap: 17px;
-  }
-  .addtocart {
-    font-size: 0.71rem;
+    grid-column-gap: 20px;
   }
 }
 
-.product-card .product-image {
-  max-height: 350px;
-  max-width: 280px;
-  margin-bottom: 10px;
-  background: #F2F2F2;
-}
-
-.product-card .product-image img {
-  display: block;
-  width: 100%;
-}
-
-.product-card .product-name {
-  margin-bottom: 14px;
-  width: 100%;
-  color: #242424;
-}
-
-.product-card .product-name a {
-  color: #242424;
-}
-
-.product-card .product-description {
-  margin-bottom: 14px;
-  display: none;
-}
-
-.product-card .product-ratings {
-  width: 100%;
-  margin-bottom: 14px;
-}
-
-.product-card .product-ratings .icon {
-  width: 16px;
-  height: 16px;
-}
-
-.product-card .product-ratings .total-reviews {
-  display: none;
-}
-
-.product-card .cart-fav-seg {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  width: 100%;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-}
-
-.product-card .cart-fav-seg .addtocart {
-  border-radius: 0px;
-  margin-right: 10px;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.product-price {
-  margin-bottom: 14px;
-  width: 100%;
-  font-weight: 600;
-}
-
-.product-price .price-label {
-  font-size: 14px;
-  font-weight: 400;
-}
-
-.product-price .regular-price {
-  color: #A5A5A5;
-  text-decoration: line-through;
-  margin-right: 10px;
-}
-
-.product-price .special-price {
-  color: #FF6472;
-}
-
-.layered-filter-wrapper {
-  width: 25%;
-  float: left;
-  padding-right: 20px;
-  min-height: 1px;
-}
-
-.layered-filter-wrapper .filter-title {
-  border-bottom: 1px solid #E8E8E8;
-  color: #242424;
-  padding: 10px 0;
-}
-
-.layered-filter-wrapper .filter-attributes .filter-attributes-item {
-  border-bottom: 1px solid #E8E8E8;
-  padding-bottom: 10px;
-}
-
-.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title {
-  padding: 10px 40px 0 10px;
-  color: #5E5E5E;
-  cursor: pointer;
-  position: relative;
-}
-
-.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title .remove-filter-link {
-  font-weight: 400;
-  color: #0041FF;
-  margin-right: 10px;
-}
-
-.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title .icon {
-  background-image: url("../images/arrow-down.svg") !important;
-  width: 10px;
-  height: 10px;
-  position: absolute;
-  right: 15px;
-  top: 14px;
-}
-
-.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content {
-  padding: 10px;
-  display: none;
-}
-
-.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items {
-  padding: 0;
-  margin: 0;
-  list-style: none none;
-}
-
-.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item {
-  padding: 8px 0;
-  color: #5E5E5E;
-}
-
-.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox {
-  margin: 0;
-}
-
-.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox .checkbox-view {
-  height: 16px;
-  width: 16px;
-  background-image: url("../images/checkbox.svg");
-}
-
-.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox input:checked + .checkbox-view {
-  background-image: url("../images/checkbox-checked.svg");
-}
-
-.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content .price-range-wrapper {
-  margin-top: 21px;
-}
-
-.layered-filter-wrapper .filter-attributes .filter-attributes-item.active .filter-attributes-content {
-  display: block;
-}
-
-.layered-filter-wrapper .filter-attributes .filter-attributes-item.active .filter-attributes-title .icon {
-  background-image: url("../images//arrow-up.svg") !important;
+@media only screen and (max-width: 840px) {
+  .layered-filter-wrapper {
+    display: none;
+  }
+  .main .category-block {
+    width: 100% !important;
+  }
+  .main .category-block .top-toolbar {
+    border-bottom: 1px solid #E8E8E8;
+  }
+  .main .category-block .top-toolbar .page-info span:first-child {
+    display: none;
+  }
+  .main .category-block .top-toolbar .page-info span:last-child {
+    display: inline;
+  }
+  .main .category-block .top-toolbar .pager .view-mode {
+    margin-right: 0px;
+  }
+  .main .category-block .top-toolbar .pager .view-mode .grid-view, .main .category-block .top-toolbar .pager .view-mode .list-view {
+    display: none;
+  }
+  .main .category-block .top-toolbar .pager .view-mode .sort-filter {
+    display: inline-block;
+    margin-top: 10px;
+  }
+  .main .category-block .top-toolbar .pager .sorter, .main .category-block .top-toolbar .pager .limiter {
+    display: none;
+  }
 }
 
 .main-container-wrapper {
@@ -584,6 +619,26 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   max-width: 100%;
 }
 
+@media only screen and (max-width: 770px) {
+  section.slider-block div.slider-content div.slider-control {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    bottom: 48%;
+    right: 0%;
+    width: 100%;
+  }
+  section.slider-block div.slider-content div.slider-control .dark-left-icon {
+    margin-left: 15px;
+  }
+  section.slider-block div.slider-content div.slider-control .light-right-icon {
+    margin-right: 15px;
+  }
+}
+
 .header {
   margin-top: 16px;
   margin-bottom: 21px;
@@ -920,6 +975,33 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   right: 10px;
 }
 
+@media only screen and (max-width: 770px) {
+  .header .header-top div.left-content ul.search-container li.search-group {
+    display: none;
+  }
+  .header .header-top div.right-content {
+    display: none;
+  }
+  .header .header-top .right-responsive {
+    display: inherit;
+  }
+  .header .header-bottom {
+    border-bottom: none;
+    display: none;
+  }
+  .header .header-bottom .nav > li {
+    float: none;
+    height: 48px;
+    border-bottom: 1px solid #E8E8E8;
+  }
+  .header .header-bottom .nav > li:last-child {
+    float: none;
+  }
+  .header .header-bottom .nav > li:last-child img {
+    margin-left: 10px;
+  }
+}
+
 .footer {
   background-color: #f2f2f2;
   padding-left: 10%;
@@ -993,7 +1075,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   text-align: center;
 }
 
-.main .category-block {
+.main .category-container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1004,19 +1086,19 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   width: 100%;
 }
 
-.main .category-block .category-block {
-  width: 100%;
+.main .category-container .category-block {
+  width: 80%;
   display: block;
 }
 
-.main .category-block .category-block .hero-image {
+.main .category-container .category-block .hero-image {
   border: 1px solid green;
   display: block;
   visibility: visible;
   width: auto;
 }
 
-.main .category-block .category-block .hero-image img {
+.main .category-container .category-block .hero-image img {
   height: 400px;
   width: 100%;
 }
@@ -1964,6 +2046,33 @@ section.cart .cart-content .right-side {
   padding-left: 40px;
 }
 
+@media only screen and (max-width: 770px) {
+  .checkout-process .col-main {
+    width: 100%;
+    padding-right: 0px;
+  }
+  .checkout-process .col-main ul.checkout-steps {
+    border-bottom: none;
+  }
+  .checkout-process .col-main ul.checkout-steps span {
+    display: none;
+  }
+  .checkout-process .col-main ul.checkout-steps .line {
+    -webkit-box-flex: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1;
+    border-bottom: 1px solid #E8E8E8;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  .checkout-process .step-content .control-group .control {
+    width: 100%;
+  }
+  .checkout-process .col-right {
+    display: none;
+  }
+}
+
 .attached-products-wrapper {
   margin-bottom: 80px;
 }