I want to add a static layout on my homepage

Solved
New Member
6 0 0
        <div id="shopify-section-static-highlights-banners" class="shopify-section highlights-banners--section"><script type="application/json" data-section-type="static-highlights-banners" data-section-id="static-highlights-banners">
</script>


  <style>
    .highlights-banners-container {
      background-color: #f8f8f8;
    }

    .highlights-banners:before {
      background: linear-gradient( to right, #f8f8f8 10%, rgba(248, 248, 248, 0) 100%);
    }

    .highlights-banners:after {
      background: linear-gradient( to left, #f8f8f8 10%, rgba(248, 248, 248, 0) 100%);
    }

    .highlights-banners-block {
      color: #4d4d4d;
    }

    .highlights-banners-icon {
      color: #4d4d4d;
    }
  </style>

  <div class="highlights-banners-container">
    <div class="highlights-banners highlight-banners-count-4">
      
        
          
            <div class="highlights-banners-block">
          
            
              <div class="highlights-banners-icon">
                
                  
              <svg width="60" height="40" viewBox="0 0 60 40">      <path fill="currentColor" fill-rule="evenodd" transform="translate(-263.000000, -117.000000)" d="M289,151.5 C289,154.537566 286.537566,157 283.5,157 C280.462434,157 278,154.537566 278,151.5 C278,151.331455 278.007581,151.164681 278.022422,151 L271,151 L271,140 L273,140 L273,149 L278.59971,149 C279.510065,147.219162 281.362657,146 283.5,146 C285.637343,146 287.489935,147.219162 288.40029,148.999999 L301,149 L301,119 L271,119 L271,117 L303,117 L303,126 L316.723739,126 C317.85789,126 318.895087,126.639588 319.404327,127.652985 L320.786845,130.404226 C322.242105,133.300224 323,136.496398 323,139.737476 L323,148 C323,149.656854 321.656854,151 320,151 L316.977578,151 C316.992419,151.164681 317,151.331455 317,151.5 C317,154.537566 314.537566,157 311.5,157 C308.462434,157 306,154.537566 306,151.5 C306,151.331455 306.007581,151.164681 306.022422,151 L288.977578,151 C288.992419,151.164681 289,151.331455 289,151.5 Z M319.417229,134.516568 L319.417798,134.118058 C319.418189,133.844298 319.362374,133.573373 319.253808,133.32206 L317.177681,128.516129 L310.567164,128.516129 C310.014879,128.516129 309.567164,128.963844 309.567164,129.516129 L309.567164,134.330091 C309.567164,134.882376 310.014879,135.330091 310.567164,135.330091 L318.602544,135.330091 C319.052028,135.330091 319.416588,134.966052 319.417229,134.516568 Z M311.5,155 C313.432997,155 315,153.432997 315,151.5 C315,149.567003 313.432997,148 311.5,148 C309.567003,148 308,149.567003 308,151.5 C308,153.432997 309.567003,155 311.5,155 Z M283.5,155 C285.432997,155 287,153.432997 287,151.5 C287,149.567003 285.432997,148 283.5,148 C281.567003,148 280,149.567003 280,151.5 C280,153.432997 281.567003,155 283.5,155 Z M264,123 L280,123 C280.552285,123 281,123.447715 281,124 C281,124.552285 280.552285,125 280,125 L264,125 C263.447715,125 263,124.552285 263,124 C263,123.447715 263.447715,123 264,123 Z M267,128 L280,128 C280.552285,128 281,128.447715 281,129 C281,129.552285 280.552285,130 280,130 L267,130 C266.447715,130 266,129.552285 266,129 C266,128.447715 266.447715,128 267,128 Z M271,133 L280,133 C280.552285,133 281,133.447715 281,134 C281,134.552285 280.552285,135 280,135 L271,135 C270.447715,135 270,134.552285 270,134 C270,133.447715 270.447715,133 271,133 Z"></path>    </svg>                                      

                
              </div>
            

            <div class="highlights-banners-text">
              
                <h4 class="highlights-banners-heading">
                  Free Shipping
                </h4>
              

              
                We ship to over 200 countries &amp; regions.
              
            </div>
          
            </div>
          
        
      
        
          
            <div class="highlights-banners-block">
          
            
              <div class="highlights-banners-icon">
                
                  
            <svg class="icon-credit-card " aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="48" height="37" viewBox="0 0 48 37">      <path fill="currentColor" fill-rule="nonzero" d="M45.918 8.348l-.005-3.205c0-1.788-1.127-3.086-2.908-3.086H5.217c-1.781 0-3.13 1.298-3.13 3.086l-.005 3.205h43.836zm.011 6.26H2.071L2.043 31.35c0 1.788 1.282 3.086 3.063 3.086h37.788c1.781 0 3.063-1.298 3.063-3.086l-.028-16.74zM5.217 0h37.788C45.962 0 48 2.178 48 5.143v26.236c0 2.965-2.149 5.143-5.106 5.143H5.106C2.15 36.522 0 34.344 0 31.379V5.143C0 2.178 2.26 0 5.217 0z"></path>    </svg>                                        

                
              </div>
            

            <div class="highlights-banners-text">
              
                <h4 class="highlights-banners-heading">
                  Secure Checkout
                </h4>
              

              
                Pay with the  most secure payment methods.
              
            </div>
          
            </div>
          
        
      
        
          
            <div class="highlights-banners-block">
          
            
              <div class="highlights-banners-icon">
                
                  
        <svg class="icon-chat-alternate " aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="48" height="43" viewBox="0 0 48 43">      <path fill="currentColor" fill-rule="nonzero" transform="translate(-356.000000, -121.000000)" d="M381,153.103862 L381,154.526017 C381,156.635218 379.258885,158.345064 377.111111,158.345064 L368.117955,158.345064 L361.652358,163.866117 C361.420822,164.063829 361.069917,164.03978 360.86859,163.812402 C360.764575,163.694928 360.716614,163.539414 360.736781,163.385006 L361.252518,159.43622 L361.39503,159.43622 L361.270648,159.297405 L361.39503,158.345064 L360.417329,158.345064 L360.292947,158.206249 L360.274817,158.345064 L359.888889,158.345064 C357.741115,158.345064 356,156.635218 356,154.526017 L356,143.819047 C356,141.709845 357.741115,140 359.888889,140 L361,140 L361,127.683332 C361,123.99223 363.994718,121 367.688889,121 L397.311111,121 C401.005282,121 404,123.99223 404,127.683332 L404,146.42053 C404,150.111632 401.005282,153.103862 397.311111,153.103862 L394.720549,153.103862 L395.852737,161.923761 C395.887423,162.193974 395.804931,162.466124 395.626026,162.671703 C395.279743,163.069614 394.676187,163.1117 394.277945,162.765706 L383.157118,153.103862 L381,153.103862 Z M392.548661,151.194338 L397.311111,151.194338 C399.949805,151.194338 402.088889,149.057032 402.088889,146.42053 L402.088889,127.683332 C402.088889,125.04683 399.949805,122.909523 397.311111,122.909523 L367.688889,122.909523 C365.050195,122.909523 362.911111,125.04683 362.911111,127.683332 L362.911111,146.42053 C362.911111,149.057032 365.050195,151.194338 367.688889,151.194338 L383.871803,151.194338 L393.637832,159.679125 L392.548661,151.194338 Z M370.888509,142 C370.400085,142 370,141.549712 370,141 C370,140.450288 370.400085,140 370.888509,140 L377.111486,140 C377.59991,140 377.999995,140.450288 377.999995,141 C378.001659,141.549712 377.601578,142 377.11315,142 L370.888509,142 Z M370.888414,137 C370.400043,137 370,136.549712 370,136 C370,135.450288 370.400043,135 370.888414,135 L385.11158,135 C385.599952,135 385.999995,135.450288 385.999995,136 C386.001659,136.549712 385.601621,137 385.113245,137 L370.888414,137 Z M370.888414,132 C370.400043,132 370,131.549712 370,131 C370,130.450288 370.400043,130 370.888414,130 L385.11158,130 C385.599952,130 385.999995,130.450288 385.999995,131 C386.001659,131.549712 385.601621,132 385.113245,132 L370.888414,132 Z"></path>    </svg>                                            

                
              </div>
            

            <div class="highlights-banners-text">
              
                <h4 class="highlights-banners-heading">
                  We're Here to Help
                </h4>
              

              
                Contact us at anytime for a smooth shopping experience.
              
            </div>
          
            </div>
          
        
      
        
          
            <div class="highlights-banners-block">
          
            
              <div class="highlights-banners-icon">
                
                  
                        <svg class="icon-label-tag " aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="40" height="47" viewBox="0 0 40 47">      <path fill="currentColor" fill-rule="evenodd" d="M28.916 6.543V.75h2.028v5.793h3.62c1.321 0 2.537.529 3.54 1.48 1.006.95 1.48 2.22 1.48 3.54v9.777c0 1.11-.264 2.273-.792 3.54-.529 1.268-1.162 2.273-1.955 3.012l-16.805 16.91c-.952.952-2.168 1.427-3.54 1.427-1.322 0-2.538-.475-3.49-1.427L1.432 33.23C.479 32.28.004 31.063.004 29.69c-.054-1.321.421-2.537 1.321-3.542L18.235 9.29c.794-.793 1.797-1.427 3.066-1.955 1.268-.529 2.432-.793 3.54-.793h4.075zm0 2.008h-4.128c-.847 0-1.745.21-2.748.634-1.003.423-1.796.898-2.378 1.532L2.803 27.522c-.582.634-.846 1.321-.846 2.167-.052.793.266 1.532.846 2.114l11.521 11.572c.634.583 1.321.847 2.168.847.846 0 1.531-.318 2.114-.847L35.462 26.52c.582-.582 1.11-1.375 1.532-2.378.423-1.003.634-1.904.634-2.748l.002-9.83c0-.793-.318-1.532-.898-2.114-.582-.582-1.321-.898-2.114-.898h-3.674v4.67a3 3 0 0 1 1.242.772c.582.582.898 1.32.898 2.113 0 .847-.318 1.532-.898 2.114-.582.582-1.32.898-2.114.898-.846 0-1.531-.318-2.113-.898-.582-.582-.898-1.32-.898-2.114 0-.846.318-1.531.898-2.113.29-.317.608-.542.957-.687V8.551zM11.934 30.725a.986.986 0 0 1-.7-1.686l8.569-8.568a.986.986 0 0 1 1.397 0 .986.986 0 0 1 0 1.397l-8.568 8.568a.98.98 0 0 1-.698.29zm3.37 3.576a.986.986 0 0 1 0-1.397l3.845-3.844a.986.986 0 0 1 1.397 0 .986.986 0 0 1 0 1.397l-3.844 3.844a.986.986 0 0 1-1.397 0z"></path>    </svg>                            

                
              </div>
            

            <div class="highlights-banners-text">
              
                <h4 class="highlights-banners-heading">
                  Shop with Confidence
                </h4>
              

              
                Always protected from click to delivery.
              
            </div>
          
            </div>
          
        
      
    </div>
  </div>


</div>

Untitled.pngBut I get this (It is not inline and mobile friendly)Untitled.png

0 Likes

Success.

Hello!

I can resolve or help you with this.

There is missing code for the responsive view so for that we need to do code.

Please connect with me on lemolite790@gmail.com.

0 Likes
Highlighted

Success.

Shopify Expert
2648 60 642

For example, can try adding this inside <style> .. </style>:

.highlights-banners {
    display: flex;
    flex-wrap: wrap;
}
.highlights-banners-block {
    display: flex;
    flex: 1 1 25%;
}
@media (max-width: 900px) {
    .highlights-banners-block {
        flex-basis: 50%;
    }
}
.highlights-banners-block div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
}
.highlights-banners-block * {
    margin:0;
}
Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes