Mobile View

all-product.html

@@ -5432,13 +5432,13 @@
         
             <!-- all product nav -->
             <section id="all-product-nav" class="mt-2 py-2 d-none d-lg-block">
-                <div class="container padding-adjust">
+                <div class="container">
                     <div class="swiper all-product-nav-slider">
                         <div class="swiper-wrapper">
                             <div class="swiper-slide">
-                            <a href="#">
-                                <a class="border-end border-1 border-extralight-gray px-3 py-1 active" href="#">Shampoo</a>
-                            </a>
+                                <a href="#">
+                                    <a class="border-end border-1 border-extralight-gray px-3 py-1 active" href="#">Shampoo</a>
+                                </a>
                             </div>
                             <div class="swiper-slide">
                             <a href="#">
@@ -5523,228 +5523,227 @@
         
             <!-- all products filter and product -->
             <section id="all-products" class="mt-5 position-relative">
-                <div class="container padding-adjust">
-        
-                    <!-- short filter  count button-->
-                    <div class="short-filter d-flex justify-content-between align-items-center px-3 pb-3">
-        
-                        <div class="d-none d-lg-block fs-5 text-gray">
-                            <span >Items :</span>
-                            <span>135</span>
-                        </div>
-        
-                        <!-- short -->
-                        <div class="d-flex align-items-center text-gray">
-                            <span class="me-3 fs-6 d-none d-lg-block" for="short">SORT BY :</span>
-                            <span>
-                                <select class="short-select form-select rounded-0 border-extralight-black text-black-extralight" >
-                                    <option selected>Short By</option>
-                                    <option value="1">Featured Featured</option>
-                                    <option value="2">Featured</option>
-                                    <option value="3">Featured</option>
-                                </select>
-                            </span>
-                        </div>
-        
-                        <!-- filter btn for mobile screen -->
-                        <button id="filter-button" class=" btn d-block d-lg-none rounded-0 border-1 border-extralight-black text-black-extralight">
-                            <span>Filter BY</span>
-                            <span class="ms-3">
-                                <img src="./images/icon/filter-icon.svg" alt="">
-                            </span>
-                        </button>
-                    </div>
-        
+                <div class="container">
+                    <div class="row">
+            
 
-                    <!-- filter and products -->
-                    <div class=" d-block d-lg-flex ">
-        
-                        <!-- filter -->
-                        <div class=" filter bg-white pt-0 p-2  border-end border-3 border-light-white ">
-        
-                            <!-- filter by offer -->
-                            <div class="filter-by-offer">
-                                <div class="title border-bottom border-1 border-light-white d-flex justify-content-between align-items-start">
-                                    <h4 class="py-2">Filter by Offer</h4>
-                                    <button class="filter-close-btn btn d-block d-lg-none">
-                                        <img src="./images/icon/cross-icon.svg" alt="">
-                                    </button>
-                                </div>
-        
-                                <input class="w-100 mt-3 rounded-2 border-0 bg-gray-extralight text-gray fs-5 px-2 py-1" placeholder="search" type="text">
-        
-                                <form action="" class="mt-3">
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="clearance-sale">
-                                        <label class="form-check-label fw-light" for="clearance-sale">
-                                            Clearance Sale
-                                        </label>
-                                    </div>
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="to-taka">
-                                        <label class="form-check-label fw-light" for="to-taka">
-                                            49 - 199 Tk
-                                        </label>
-                                    </div>
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="k-beauty">
-                                        <label class="form-check-label fw-light" for="k-beauty">
-                                            K. Beauty Sale
-                                        </label>
-                                    </div>
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="kitchen-assositation">
-                                        <label class="form-check-label fw-light" for="kitchen-assositation">
-                                            Kitchen & Home Accessories
-                                        </label>
-                                    </div>
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="lifestyle-bags">
-                                        <label class="form-check-label fw-light" for="lifestyle-bags">
-                                            Lifestyle Bags
-                                        </label>
+            
+
+                        <!-- filter and products -->
+                        <div class="col-lg-3">
+                            <!-- filter -->
+                            <div class="filter bg-white pt-0 p-2  border-end border-3 border-light-white ">
+            
+                                <!-- filter by offer -->
+                                <div class="filter-by-offer">
+                                    <div class="title border-bottom border-1 border-light-white d-flex justify-content-between align-items-start">
+                                        <h4 class="py-2">Filter by Offer</h4>
+                                        <button class="filter-close-btn btn d-block d-lg-none">
+                                            <img src="./images/icon/cross-icon.svg" alt="">
+                                        </button>
                                     </div>
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="lifestyle-shoe">
-                                        <label class="form-check-label fw-light" for="lifestyle-shoe">
-                                            Lifestyle Shoes
-                                        </label>
+            
+                                    <input class="w-100 mt-3 rounded-2 border-0 bg-gray-extralight text-gray fs-5 px-2 py-1" placeholder="search" type="text">
+            
+                                    <form action="" class="mt-3">
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="clearance-sale">
+                                            <label class="form-check-label fw-light" for="clearance-sale">
+                                                Clearance Sale
+                                            </label>
+                                        </div>
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="to-taka">
+                                            <label class="form-check-label fw-light" for="to-taka">
+                                                49 - 199 Tk
+                                            </label>
+                                        </div>
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="k-beauty">
+                                            <label class="form-check-label fw-light" for="k-beauty">
+                                                K. Beauty Sale
+                                            </label>
+                                        </div>
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="kitchen-assositation">
+                                            <label class="form-check-label fw-light" for="kitchen-assositation">
+                                                Kitchen & Home Accessories
+                                            </label>
+                                        </div>
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="lifestyle-bags">
+                                            <label class="form-check-label fw-light" for="lifestyle-bags">
+                                                Lifestyle Bags
+                                            </label>
+                                        </div>
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="lifestyle-shoe">
+                                            <label class="form-check-label fw-light" for="lifestyle-shoe">
+                                                Lifestyle Shoes
+                                            </label>
+                                        </div>
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="lifestyle-jewelry">
+                                            <label class="form-check-label fw-light" for="lifestyle-jewelry">
+                                                Lifestyle Jewelry
+                                            </label>
+                                        </div>
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="heirstyle-accessories">
+                                            <label class="form-check-label fw-light" for="heirstyle-accessories">
+                                                Hair Style Accessories
+                                            </label>
+                                        </div>
+                                    </form>
+                                </div>
+            
+                                <!--filter product price -->
+                                <div class="mt-4 filter-product-price">
+                                    <div class="title border-bottom border-1 border-light-white">
+                                        <h4 class="py-2">Filter by price</h4>
                                     </div>
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="lifestyle-jewelry">
-                                        <label class="form-check-label fw-light" for="lifestyle-jewelry">
-                                            Lifestyle Jewelry
-                                        </label>
+            
+            
+                                    <div class="mt-3">
+                                        <input type="range" min="0" max="50000" class="form-range " >
                                     </div>
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="heirstyle-accessories">
-                                        <label class="form-check-label fw-light" for="heirstyle-accessories">
-                                            Hair Style Accessories
-                                        </label>
+            
+                                    <div class="mt-2 fw-light text-pink">
+                                        <span class="text-dark">Price:</span>
+                                        <span>tk 0</span>
+                                        <span>to</span>
+                                        <span>tk 50000</span>
                                     </div>
-                                </form>
-                            </div>
-        
-                            <!--filter product price -->
-                            <div class="mt-4 filter-product-price">
-                                <div class="title border-bottom border-1 border-light-white">
-                                    <h4 class="py-2">Filter by price</h4>
                                 </div>
-        
-        
-                                <div class="mt-3">
-                                    <input type="range" min="0" max="50000" class="form-range " >
+            
+                                <!--filter product categories -->
+                                <div class="mt-4 filter-product-categories">
+                                    <div class="title border-bottom border-1 border-light-white">
+                                        <h4 class="py-2">Product categories</h4>
+                                    </div>
+            
+                                    <ul class="mt-3">
+                                        <li class="mt-2 d-flex justify-content-between text-pink">
+                                            <div class="name fs-5 fw-semibold text-pink ">Shampo</div>
+                                            <div class="amount rounded-pill bg-pink text-white py-1 px-4 small">15</div>
+                                        </li>
+                                    </ul>
                                 </div>
-        
-                                <div class="mt-2 fw-light text-pink">
-                                    <span class="text-dark">Price:</span>
-                                    <span>tk 0</span>
-                                    <span>to</span>
-                                    <span>tk 50000</span>
+            
+                                <!-- filter by offer -->
+                                <div class="mt-4 filter-by-offer">
+                                    <div class="title border-bottom border-1 border-light-white">
+                                        <h4 class="py-2">Filter by Brand</h4>
+                                    </div>
+            
+                                    <input class="w-100 mt-3 rounded-2 border-0 bg-gray-extralight text-gray fs-5 px-2 py-1" placeholder="search" type="text">
+            
+                                    <form action="" class="mt-3">
+                                        
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="alberto-balsma">
+                                            <label class="form-check-label fw-light" for="alberto-balsma">
+                                                <span>Alberto Balsam </span>
+                                                <span>(1)</span>
+                                            </label>
+                                        </div>
+                                        
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="alpecin">
+                                            <label class="form-check-label fw-light" for="alpecin">
+                                                <span>Alpecin</span>
+                                                <span>(1)</span>
+                                            </label>
+                                        </div>
+                                        
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="aveeno">
+                                            <label class="form-check-label fw-light" for="aveeno">
+                                                <span>Aveeno</span>
+                                                <span>(1)</span>
+                                            </label>
+                                        </div>
+                                        
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="badedas">
+                                            <label class="form-check-label fw-light" for="badedas">
+                                                <span>Badedas</span>
+                                                <span>(1)</span>
+                                            </label>
+                                        </div>
+                                        
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="biodarma">
+                                            <label class="form-check-label fw-light" for="biodarma">
+                                                <span>Biodarma</span>
+                                                <span>(1)</span>
+                                            </label>
+                                        </div>
+                                        
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="bioladge">
+                                            <label class="form-check-label fw-light" for="bioladge">
+                                                <span>Bioladge</span>
+                                                <span>(1)</span>
+                                            </label>
+                                        </div>
+                                        
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="clear">
+                                            <label class="form-check-label fw-light" for="clear">
+                                                <span>Clear</span>
+                                                <span>(1)</span>
+                                            </label>
+                                        </div>
+                                        
+                                        <div class="form-check mt-2">
+                                            <input class="form-check-input" type="checkbox" value="" id="color-vibe">
+                                            <label class="form-check-label fw-light" for="color-vibe">
+                                                <span>Color Vibe</span>
+                                                <span>(1)</span>
+                                            </label>
+                                        </div>
+                                    
+                                    </form>
                                 </div>
+            
                             </div>
-        
-                            <!--filter product categories -->
-                            <div class="mt-4 filter-product-categories">
-                                <div class="title border-bottom border-1 border-light-white">
-                                    <h4 class="py-2">Product categories</h4>
-                                </div>
-        
-                                <ul class="mt-3">
-                                    <li class="mt-2 d-flex justify-content-between text-pink">
-                                        <div class="name fs-5 fw-semibold text-pink ">Shampo</div>
-                                        <div class="amount rounded-pill bg-pink text-white py-1 px-4 small">15</div>
-                                    </li>
-                                </ul>
+                            <!-- filter end -->
+                        </div>
+                        <div class="col-lg-9">
+                        <!-- short filter  count button-->
+                        <div class="short-filter d-flex justify-content-between align-items-center pb-3">
+            
+                            <div class="d-none d-lg-block fs-5 text-gray">
+                                <span >Items :</span>
+                                <span>135</span>
                             </div>
-        
-                            <!-- filter by offer -->
-                            <div class="mt-4 filter-by-offer">
-                                <div class="title border-bottom border-1 border-light-white">
-                                    <h4 class="py-2">Filter by Brand</h4>
-                                </div>
-        
-                                <input class="w-100 mt-3 rounded-2 border-0 bg-gray-extralight text-gray fs-5 px-2 py-1" placeholder="search" type="text">
-        
-                                <form action="" class="mt-3">
-                                    
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="alberto-balsma">
-                                        <label class="form-check-label fw-light" for="alberto-balsma">
-                                            <span>Alberto Balsam </span>
-                                            <span>(1)</span>
-                                        </label>
-                                    </div>
-                                    
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="alpecin">
-                                        <label class="form-check-label fw-light" for="alpecin">
-                                            <span>Alpecin</span>
-                                            <span>(1)</span>
-                                        </label>
-                                    </div>
-                                    
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="aveeno">
-                                        <label class="form-check-label fw-light" for="aveeno">
-                                            <span>Aveeno</span>
-                                            <span>(1)</span>
-                                        </label>
-                                    </div>
-                                    
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="badedas">
-                                        <label class="form-check-label fw-light" for="badedas">
-                                            <span>Badedas</span>
-                                            <span>(1)</span>
-                                        </label>
-                                    </div>
-                                    
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="biodarma">
-                                        <label class="form-check-label fw-light" for="biodarma">
-                                            <span>Biodarma</span>
-                                            <span>(1)</span>
-                                        </label>
-                                    </div>
-                                    
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="bioladge">
-                                        <label class="form-check-label fw-light" for="bioladge">
-                                            <span>Bioladge</span>
-                                            <span>(1)</span>
-                                        </label>
-                                    </div>
-                                    
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="clear">
-                                        <label class="form-check-label fw-light" for="clear">
-                                            <span>Clear</span>
-                                            <span>(1)</span>
-                                        </label>
-                                    </div>
-                                    
-                                    <div class="form-check mt-2">
-                                        <input class="form-check-input" type="checkbox" value="" id="color-vibe">
-                                        <label class="form-check-label fw-light" for="color-vibe">
-                                            <span>Color Vibe</span>
-                                            <span>(1)</span>
-                                        </label>
-                                    </div>
-                                
-                                </form>
+            
+                            <!-- short -->
+                            <div class="d-flex align-items-center text-gray">
+                                <span class="me-3 fs-6 d-none d-lg-block" for="short">SORT BY :</span>
+                                <span>
+                                    <select class="short-select form-select rounded-0 border-extralight-black text-black-extralight" >
+                                        <option selected>Short By</option>
+                                        <option value="1">Featured Featured</option>
+                                        <option value="2">Featured</option>
+                                        <option value="3">Featured</option>
+                                    </select>
+                                </span>
                             </div>
-        
+            
+                            <!-- filter btn for mobile screen -->
+                            <button id="filter-button" class=" btn d-block d-lg-none rounded-0 border-1 border-extralight-black text-black-extralight">
+                                <span>Filter BY</span>
+                                <span class="ms-3">
+                                    <img src="./images/icon/filter-icon.svg" alt="">
+                                </span>
+                            </button>
                         </div>
-                        <!-- filter end -->
-        
-                        <!-- products -->
-                        <div class="products flex-fill pt-0 p-2 ">
 
-                            
-                            <div class="d-flex justify-content-between flex-wrap padding-adjust">
+                            <div class="products row">
         
-                                <div class="product-single p-md-2 ">
+                                <div class="col-md-3 product-single">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -5804,7 +5803,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-md-2 ">
+                                <div class="col-md-3 product-single">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -5864,7 +5863,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-md-2 ">
+                                <div class="col-md-3 product-single">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -5924,7 +5923,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-md-2 ">
+                                <div class="col-md-3 product-single">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -5984,7 +5983,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-md-2 ">
+                                <div class="col-md-3 product-single">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6044,7 +6043,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-md-2 ">
+                                <div class="col-md-3 product-single">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6104,7 +6103,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-md-2 ">
+                                <div class="col-md-3 product-single">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6164,7 +6163,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-md-2 ">
+                                <div class="col-md-3 product-single">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6224,7 +6223,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-md-2 ">
+                                <div class="col-md-3 product-single">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6284,7 +6283,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-md-2 ">
+                                <div class="col-md-3 product-single">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6344,7 +6343,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-md-2 ">
+                                <div class="col-md-3 product-single">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6404,7 +6403,7 @@
                                     </div>
                                 </div>
         
-                                <div class="product-single p-md-2 ">
+                                <div class="col-md-3 product-single">
                                     <div class=" product rounded-1 px-3 py-3 text-start">
             
                                         <!-- product image -->
@@ -6463,14 +6462,11 @@
                                         </div>
                                     </div>
                                 </div>
-        
-        
-                                
                             </div>
                         </div>
-                        <!-- products end-->
+                        
+            
                     </div>
-        
                 </div>
             </section>
         

checkout.html

@@ -5414,7 +5414,7 @@
         <!-- checkout  -->
 
         <section id="checkout-page">
-            <div class="container py-4 padding-adjust">
+            <div class="container py-4">
 
                 <!-- title -->
                 <div class="section-title text-start py-3 border-bottom border-2 border-extralight-black">CHECKOUT</div>

css/style.css

@@ -670,13 +670,13 @@ a {
     width: 20%;
   }
 
-    .product-single:first-child {
+    /* .product-single:first-child {
         padding-left: 0 !important;
     }
 
     .product-single:last-child {
         padding-right: 0 !important;
-    }
+    } */
 
   .product-single .product {
     box-shadow: var(--shadow-product);
@@ -818,9 +818,9 @@ a {
 }
 
 #shop-tabs .active {
-border-bottom: solid; 
-border-bottom-width: 30px; 
-border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
+    border-bottom: solid; 
+    border-bottom-width: 30px; 
+    border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
 }
 
 div#pills-tabContent {
@@ -957,9 +957,9 @@ div#pills-tabContent {
     color: var(--pink);
 }
 
-#all-products .short-filter {
+/* #all-products .short-filter {
     margin-left: 290px;
-}
+} */
 
 #all-products .short-filter .short-select {
     max-width: 140px;
@@ -981,7 +981,7 @@ div#pills-tabContent {
 
 #all-products .products .product-single{
     width: 25%;
-    padding-left: 1rem !important;
+    margin-bottom: 20px;
 }
 
 #all-products .filter-product-price .form-range::-webkit-slider-thumb {
@@ -1062,7 +1062,7 @@ div#pills-tabContent {
 #checkout-btn-desktop   {
     bottom: 250px;
     right: 0;
-    border-radius: 10px 0 0 10px;
+    /* border-radius: 10px 0 0 10px; */
     box-shadow: var(--shadow-product);
     z-index: 10;
 }
@@ -1196,22 +1196,20 @@ div#pills-tabContent {
     #all-products .products .product-single{
         width: 50%;
     }
-
     #all-products .filter {
         min-width: 300px !important;
     }
-
-}
-
-
-@media screen and (max-width: 768px) {
-
-    #all-products .products .product-single{
+    .product-single {
+        width: 50%;
+        margin-bottom: 20px;
+    }
+    .mobile-padding{
+        padding: 0 15px;
+    }
+    #header .search {
+        top: 140px;
         width: 100%;
-        margin-bottom: 1rem;
     }
-
-
 }
 /*  All Product Page End */
 

js/app.js

@@ -270,8 +270,7 @@ const searchButton = document.querySelector(".search-btn-mobile")
         breakpoints: { 
           0: { 
             slidesPerView: 5,
-          spaceBetween: 10,
-
+            spaceBetween: 10,
           },
           576: { 
             slidesPerView: 4,