How do I display these banner horizontally rather than vertically?

Highlighted
New Member
2 0 0

Right now my image is vertical when pasting into my theme editor as per screenshot:
test.png

but how do I make it horizontal like this one below?

test1.png

 

 

<div class="module-inner module-inline-items home-inline-features">
      <div class="module-inline-item home-inline-feature">
        
    <noscript data-rimg-noscript="">
      <img
        
          src="//cdn.shopify.com/s/files/1/0434/2413/files/floyd-shipping-400x400_275x275.png?v=1533927889"
        
        alt=""
        data-rimg="noscript"
        srcset="//cdn.shopify.com/s/files/1/0434/2413/files/floyd-shipping-400x400_275x275.png?v=1533927889 1x, //cdn.shopify.com/s/files/1/0434/2413/files/floyd-shipping-400x400_399x399.png?v=1533927889 1.45x"
        class="home-inline-image"
        style="max-width: 30%;"
        
      >
    </noscript>
  

  <img src="//cdn.shopify.com/s/files/1/0434/2413/files/floyd-shipping-400x400_275x275.png?v=1533927889" alt="" data-rimg="loaded" data-rimg-scale="1" data-rimg-template="//cdn.shopify.com/s/files/1/0434/2413/files/floyd-shipping-400x400_{size}.png?v=1533927889" data-rimg-max="400x400" data-rimg-crop="false" srcset="//cdn.shopify.com/s/files/1/0434/2413/files/floyd-shipping-400x400_192x192.png?v=1533927889 2.00x" class="home-inline-image" style="max-width: 30%;" data-rimg-template-svg="data&colon;image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='275'%20height='275'></svg>">


        <article class="home-inline-text">
          
            <h1 class="feature-title">Free Shipping</h1>
          
            <div class="rte">
              <p></p><p>Free shipping and same-day delivery on all of our in stock items&nbsp;to select US cities.</p><p></p>
            </div>
        </article>
      </div>
    
      <div class="module-inline-item home-inline-feature">
        
    <noscript data-rimg-noscript="">
      <img
        
          src="//cdn.shopify.com/s/files/1/0434/2413/files/floyd-assembly-400x400_275x275.png?v=1533927943"
        
        alt=""
        data-rimg="noscript"
        srcset="//cdn.shopify.com/s/files/1/0434/2413/files/floyd-assembly-400x400_275x275.png?v=1533927943 1x, //cdn.shopify.com/s/files/1/0434/2413/files/floyd-assembly-400x400_399x399.png?v=1533927943 1.45x"
        class="home-inline-image"
        style="max-width: 30%;"
        
      >
    </noscript>
  

  <img src="//cdn.shopify.com/s/files/1/0434/2413/files/floyd-assembly-400x400_275x275.png?v=1533927943" alt="" data-rimg="loaded" data-rimg-scale="1" data-rimg-template="//cdn.shopify.com/s/files/1/0434/2413/files/floyd-assembly-400x400_{size}.png?v=1533927943" data-rimg-max="400x400" data-rimg-crop="false" srcset="//cdn.shopify.com/s/files/1/0434/2413/files/floyd-assembly-400x400_192x192.png?v=1533927943 2.00x" class="home-inline-image" style="max-width: 30%;" data-rimg-template-svg="data&colon;image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='275'%20height='275'></svg>">

        <article class="home-inline-text">
          
            <h1 class="feature-title">Simple Assembly</h1>
          

            <div class="rte">
              <p></p><p>We wanted to keep assembly as easy as possible.&nbsp;Ta-da! No tools necessary.</p><p></p>
            </div>
          
        </article>
      </div>
    
      <div class="module-inline-item home-inline-feature">
        
    <noscript data-rimg-noscript="">
      <img
        
          src="//cdn.shopify.com/s/files/1/0434/2413/files/floyd-warranty-400x400_275x275.png?v=1533927953"
        
        alt=""
        data-rimg="noscript"
        srcset="//cdn.shopify.com/s/files/1/0434/2413/files/floyd-warranty-400x400_275x275.png?v=1533927953 1x, //cdn.shopify.com/s/files/1/0434/2413/files/floyd-warranty-400x400_399x399.png?v=1533927953 1.45x"
        class="home-inline-image"
        style="max-width: 30%;"
        
      >
    </noscript>
  

  <img src="//cdn.shopify.com/s/files/1/0434/2413/files/floyd-warranty-400x400_275x275.png?v=1533927953" alt="" data-rimg="loaded" data-rimg-scale="1" data-rimg-template="//cdn.shopify.com/s/files/1/0434/2413/files/floyd-warranty-400x400_{size}.png?v=1533927953" data-rimg-max="400x400" data-rimg-crop="false" srcset="//cdn.shopify.com/s/files/1/0434/2413/files/floyd-warranty-400x400_192x192.png?v=1533927953 2.00x" class="home-inline-image" style="max-width: 30%;" data-rimg-template-svg="data&colon;image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='275'%20height='275'></svg>">


        <article class="home-inline-text">
          
            <h1 class="feature-title">10 Year Warranty</h1>
          
            <div class="rte">
              <p></p><p>Our commitment to quality for 10 years. We believe in furniture for keeping.</p><p></p>
            </div>
          
        </article>
      </div>
    
  </div>

 

0 Likes
Highlighted
Shopify Partner
2434 125 383

This varies by theme and would have to be inspected.

It looks like you've got the images set so each is 1/3 of a page width, however the element that might be containing them looks like it's also set to be a third of the page.

 

You can also try applying float:left; into the style attribute though they may not then be centered on the page.

 

If you need professional I can be hired at paull.newton+shopifyforum@gmail.com 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
New Member
2 0 0

Thanks for taking a look Paul

0 Likes