How to align a custom liquid button with padding in Theme Editor?

Store Design
, ,

Topic summary

A user needed help adding padding to a custom liquid button on their product page in the Dawn theme. The button was left-aligned but touching the page edge.\n\nSolution provided:\n- Wrap the button in a container div with class \

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

Hello! In my Theme Editor, I have created a custom liquid block in order to add an orange “Interest Form” button to the bottom of my product page. However, when I left align this button, it goes to the very edge of my webpage. How do I add padding? This is the code I have used:

Interest Form

Center align button body { text-align: left; }

This is an example product page URL from my website that I am applying this code to: https://quokkaprints.com/products/hanes-5590?variant=45492679573806

Let me know if I need to provide additional information. The theme I am using is called Frame.

Thank you in advance!!

2

You can use this code instead


        [Interest Form ](https://quokkaprints.com/pages/book-a-call)
3

Go to your theme customizer, then the product page, scroll to Custom CSS, and paste this in:

.button-container-div{
margin-top: 20px;
}

Adjust the 20px as needed. How does that look?

4

This worked out perfectly! Thank you so much!!

5

Hey

i tryed this code to for a reservation button works well on desktop but not on mobile!?
What can i add for responsive design?

many thanks !

<a class="btn" href="#"
.button-container-div { width: 100%; max-width: var(--page-width); margin: 0 auto; padding: 0 rem; } .button-container-div .btn{ background-color: #dddddd; color: #FFFFFF; border: 0px solid; padding: 12px; width: 578.85px; }