Margins - Left & Right on Stocklist Store Locator

Store Design
,

Topic summary

A user is implementing a Stockist.co store locator widget on a Shopify page using sections and blocks, but the widget spans the full width without proper margins.

Initial Problem:

Solution Provided:
PageFly support staff suggested adding custom CSS to control margins:

  1. Navigate to Online Stores > Themes > Edit code
  2. Locate theme.liquid file
  3. Add CSS targeting #stockist-widget .stockist-horizontal with 20px margin
  4. Insert code above the </head> tag

Follow-up:
The desktop solution worked successfully. For mobile responsiveness, additional CSS was provided using a media query (@media (max-width: 768px)) targeting #stockist-widget.stockist-responsive .stockist-map with 15px margin and !important flag.

The issue appears resolved with responsive margin controls for both desktop and mobile viewports.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

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:

Loading store locator from Stockist store locator...

widget margins.jpg
widget margins.jpg1368×669 114 KB

2

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 .

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

3

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
1000021546.jpg1080×1620 80.2 KB

4

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