Add in Padding For Custom Liquid | Dawn Template

[TheBrandAudit]

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

[BSSCommerce-HDL · Accepted solution]

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 </head> tag: 

<style>
.hs-form-iframe {
    padding-left: 50px !important;
}
</style>

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 😍

[TheBrandAudit]

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

[BSS-TekLabs]

- 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.

[BSSCommerce-B2B]

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  </head> or </body>:

.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.