Add in Padding For Custom Liquid | Dawn Template

Hi All,

How do I modify the Dawn website code to add padding for a Custom Liquid I’ve added (i.e. a HubSpot contact form). The Form is too left justified and want to add padding around it. Here’s the page in question: https://thebrandaudit.ca/pages/contact

Thanks in advance for the help!

Christina

CEO & Founder - The Brand Audit

Hi @TheBrandAudit ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:


Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

  • Here is the solution for you @TheBrandAudit
  • Please follow these steps:

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.hbspt-form {
 display: flex !important;
    justify-content: center !important;
}
  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

Hi @TheBrandAudit ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

Step2: Search for the file theme.liquid and add this script before the end of tag or :

.hbspt-form {
    padding-left: 30px !important;
}

In this step, you can change value of padding-left as you want to fix position of form.

In my example, I choose 30px.

Step 3: Save and reload page

And the result will be ok in both mobile and desktop view:

#Mobile:

#Desktop

It’s a pleasure to assist you.

Good luck! ^^

If they are helpful, please give us likes and mark as the solution.

This worked perfect - thank you SO much for the quick help - very much appreciated!