Banner with 4 columns [Boundless Theme] code included

Solved
New Member
6 0 0

I've been tweaking and modifying my site.  I saw a great looking 4 column banner in the area just below a slideshow on this site.  I have the code (show below) which should do everything correctly.  It displays the text and images but it doesn't make 4 columns. Screen shot below show my page not working as well as another screen shot where this code is working successfully on the site referenced above.  Any help is appreciated. I'd rather not share my site/password on this forum unless absolutely necessary.  All help is greatly appreciated.

 

not working.JPGAbove: example of code NOT WORKING - only one columnworking.JPGAbove: code WORKING - there are 4 columns

 

<style>
  @media screen and (min-width: 1024px)
.highlight-banners-count-4 .highlights-banners-block {
    width: 25%;
}
</style>
 <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">
        <a class="highlights-banners-block" href="/pages/shipping-delivery">
              <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 US Shipping
                </h4>
              

              
                To the lower 48 states
              
            </div>
          
            </a>
          
        
      
        
          
            <a class="highlights-banners-block" href="/pages/financing">
          
            
              <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">
                  Yes, We Finance!
                </h4>
              

              
                Buy now. Pay later.
              
            </div>
          
            </a>
          
        
      
        
          
            <a class="highlights-banners-block" href="/pages/30-day-price-match-guarantee">
          
            
              <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">
                  Price Match Guarantee
                </h4>
              

              
                Up to 30 days after purchase
              
            </div>
          
            </a>
          
        
      
        
          
            <div class="highlights-banners-block">
          
            
              <div class="highlights-banners-icon">
                
                  
      <svg class="icon-chat " aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="45" height="44" viewBox="0 0 45 44">      <path fill="currentColor" fill-rule="nonzero" d="M36.474 42.863a1 1 0 0 1-1.648.882l-11.638-10.12H7a7 7 0 0 1-7-7V7a7 7 0 0 1 7-7h31a7 7 0 0 1 7 7v19.625a7 7 0 0 1-7 7h-2.711l1.185 9.238zm-3.458-11.238H38a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5H7a5 5 0 0 0-5 5v19.625a5 5 0 0 0 5 5h16.936l10.22 8.887-1.14-8.887zM9.889 22C9.4 22 9 21.55 9 21s.4-1 .889-1h6.222c.489 0 .889.45.889 1 .002.55-.398 1-.887 1H9.89zm.055-5C9.425 17 9 16.55 9 16s.425-1 .944-1h15.112c.519 0 .944.45.944 1 .002.55-.423 1-.942 1H9.944zm0-6C9.425 11 9 10.55 9 10s.425-1 .944-1h15.112c.519 0 .944.45.944 1 .002.55-.423 1-.942 1H9.944z"></path>    </svg>                                              

                
              </div>
            

            <div class="highlights-banners-text">
              
                <h4 class="highlights-banners-heading">
                  Chat with Us
                </h4>
              

              
                We're here to help!
              
            </div>
          
            </div>
          
        
      
    </div>
  </div>

</div>
0 Likes

Success.

Shopify Expert
2488 417 525

Hi,

Please add below css in <style> tag in last on this page:

    .highlights-banners-container{display: flex;justify-content: center;}
    .highlight-banners-count-4{display: flex;}
    .highlights-banners-block {display: flex;padding: 20px;}
    .highlights-banners-text {padding-left: 20px;}

    @media only screen and (max-width: 600px) {
      .highlight-banners-count-4{display:block !important}
    }

Let me know if you need help.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
6 0 0

Thank you!

0 Likes
Tourist
4 1 0

Hey, 

 

I think you have solved a problem I have been trying to work out for days. With your code which section do you add it to in the editor?

 

Thank you

0 Likes

If you hadn't figured this out, paste the code in a custom html section in your theme editor. Add the  additional code offered by support at the bottom of the style tag just above the </style>

 

Let me know if you understand. 

0 Likes
New Member
1 0 0

Can I implement the same thing in Brooklyn theme.

I tried the same code, however the slider thing doesn't work in mobile screen, the text overlaps with each other.

Any solution to that ?

0 Likes