Button Spacing

Store Design
, , ,

Topic summary

Goal: center two “Give” buttons beneath two columns using custom Liquid (Shopify’s templating language) and CSS. Attempts with margins and separate classes still render off-center.

What was tried/proposed:

  • User shared code with two divs (.left, .right) each containing a button link (PayPal donate URLs). Screenshots were provided and are relevant to diagnosing layout.
  • A reply suggested wrapping the buttons in a parent container and applying text-align: center to the wrapper. It warned that centering separate element hierarchies can break across screen sizes and recommended properly customizing the section to include buttons natively.

Current status:

  • User reports the wrapper/text-align approach “didn’t work,” with no additional code/context shared post-try.

Open items / next info needed:

  • Store URL, theme name, and exact section/context where the code lives, as requested by the responder.
  • Clarification on responsive behavior and CSS targeting for the columns/containers.

Resolution: none yet; discussion remains open.

Summarized with AI on December 12. AI used: gpt-5.
1

Hi Everyone!

I have some custom liquid code that puts two buttons underneath two columns. I just want to align the buttons in the center of each column. Having some trouble, I’ve tried to use “margin” to align them but they show up off centered on the store page. I tried naming the classes different to reference them in CSS separately but no luck.

VicBrew1_1-1734115658096.png
VicBrew1_1-1734115658096.png1314×341 35.6 KB

VicBrew1_2-1734115680776.png
VicBrew1_2-1734115680776.png1214×371 27.5 KB

VicBrew1_3-1734115825330.png
VicBrew1_3-1734115825330.png988×519 42.8 KB

Code:

Give
Give

Any suggestions? Any help would be appreciated! Thank you!

2

Hi @VicBrew1 put them in a wrapper and style that wrapper to text-align: center;

be aware that your trying to relatively center separate elements heirarchies so it may look good on your screen but may break on other screen sizes.

The proper way to do this is to actually customize the target section to have buttons.

If you need this styled further or sections customized for you then contact me for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

Sorry I tried this but it didn’t work. Maybe I didn’t do it right?