Margins - Left & Right on Stocklist Store Locator

Ryanp
Explorer
65 3 21

Im using sections and blocks on this page template - I added the widget to a block of  liquid.. However I cannot get the margins to work.. Anybody have a clue what I can do to put this widget into a container or add margins to the sides so it doesnt span? https://devildaves.com/pages/bulk-bloody-mary-seasoning

 

Here is the Widget Code I am using: 

<!-- Start Stockist.co widget -->
<div data-stockist-widget-tag="u7955">Loading store locator from <a href="https://stockist.co">Stockist store locator</a>...</div>
<script>// <![CDATA[
(function(s,t,o,c,k){c=s.createElement(t);c.src=o;c.async=1;
k=s.getElementsByTagName(t)[0];k.parentNode.insertBefore(c,k);
})(document,'script','//stockist.co/embed/v1/widget.min.js');
// ]]></script> <!-- End Stockist.co widget -->

 

widget margins.jpg

Replies 3 (3)

PageFly-Amelia
Trailblazer
150 49 58

Hello @Ryanp 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid,
Step 3: Add code above the tag </head>.

If you are using a page builder app, you can directly open the Custom code section of the app and use the code below without following the steps above.

#stockist-widget .stockist-horizontal {
   margin: 20px;
}

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

Ryanp
Explorer
65 3 21

Thank you Amelia - That worked great for desktop. I put it in the CSS of the editor.. If I want to give it padding on mobile, should I create another line and wrap it in @mobile?

 

Here is what I did..

1000021546.jpg

PageFly-Amelia
Trailblazer
150 49 58

Hello @Ryanp 

 

I am glad that my solution can help you. If you want to use margin on Mobile, you can add my code below to make it work on mobile.

@media (max-width: 768px){
   #stockist-widget.stockist-responsive .stockist-map {
      margin: 15px !important;
   }
}

 

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.