Saurabh Web Solutions Subscribe

Type to search all tutorials and free downloads.

Return Box

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>feature-cts-trust Section</title>
 <style>
   .feature-cts-trusts-container {
     display: flex;
     justify-content: space-around;
     align-items: center;
 padding:  15px 10px;
     width: 100%;
     background-color: #FAFAFA; /* Background color */
     flex-wrap: nowrap; /* Prevent columns from wrapping to a new line */
   }


   .feature-cts-trust {
     text-cts-trust-align: center; /* Center the text-cts-trust inside each feature-cts-trust */
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 150px; /* Fixed width to ensure columns always stay in one row */
     box-sizing: border-box; /* Ensure padding doesn’t affect width */
   }


   .text-cts-trust {
 margin-top: 10px;
 font-size: 16px;
 color: #333;
 font-weight: 500;
 text-cts-trust-align: center !important; /* Ensure the text-cts-trust is centered */
 margin: 0 !important;
 padding: 0 !important;
}




   .icon-cts-trust img {
     width: 50px;
     height: 50px;
   }


   .divider {
     width: 1px;
     height: 50px;
     background-color: #ccc; /* Divider color */
   }


   /* Optional: If you want to ensure a consistent gap between the items */
   .feature-cts-trust + .divider {
     margin: 0 20px; /* Adds space between columns */
   }


   /* Mobile specific styling */
   @media (max-width: 768px) {
     .feature-cts-trusts-container {
       justify-content: space-between; /* Spread out the columns evenly */
       padding: 10px 0;
     }


     .feature-cts-trust {
       width: 100%; /* Allow the feature-cts-trust to take full width */
       margin-bottom: 20px;
     }


     .text-cts-trust {
       font-size: 12px;
       text-cts-trust-align: center; /* Ensure text-cts-trust is centered */
     }


     .divider {
       display: none; /* Hide the divider on mobile */
     }
   }
 </style>
</head>
<body>


 <div class="feature-cts-trusts-container">
   <div class="feature-cts-trust">
     <div class="icon-cts-trust">
       <center>
       <img src="https://cdn.shopify.com/s/files/1/0605/5798/3989/files/free-shipping2.svg?v=1731866810" alt="Free Shipping icon-cts-trust">
       </center>
     </div>
     <p class="text-cts-trust">Free Shipping</p>
   </div>
   <div class="divider"></div>
   <div class="feature-cts-trust">
     <div class="icon-cts-trust">
       <center>
       <img src="https://cdn.shopify.com/s/files/1/0605/5798/3989/files/return-box.svg?v=1731866966" alt="7 Days Return icon-cts-trust">
       </center>
     </div>
     <p class="text-cts-trust">7 Days Return</p>
   </div>
   <div class="divider"></div>
   <div class="feature-cts-trust">
     <div class="icon-cts-trust">
       <center>
       <img src="https://cdn.shopify.com/s/files/1/0605/5798/3989/files/indian-rupee.svg?v=1731867101" alt="Cash on Delivery icon-cts-trust">
       </center>
     </div>
     <p class="text-cts-trust">Cash on Delivery</p>
   </div>
 </div>


</body>
</html>