Stylesheet - Form - Design Manager Preview different to Website page

[KongGroup]

Hi. 

Not sure what I am doing wrong. I have amended the code and in the design tool preview, my form looks how I would like to have it.

As soon as i start to create a website page the layout looks different...wrong.

The columns have a different length and there is a lot of white space on the right.

When I go into the form editor i can see that there are 3 columns and not 2, but I dont get where this 3rd column is coming from.

[Jake_Lett]

The second screenshot preview shows those light gray boxes to simulate content already on the page. Like a placeholder so you can visualize the header, footer, and sidebar. So this isn't the actual web preview because the form editor doesn't know what page template you are using so it just gives you a default view.

As for the actual page editing preview. Are you able to share a preview URL so we can inspect the CSS styles? Does the form look ok when it is published and wrong in the editor view? My guess is somewhere in the code there is a set max-width on the form and it is adding right margin. Also check to see if the form layout changes when you adjust your screen width. There might be a media query impacting the width.

---

Jacob Lett

Freelance HubSpot CMS Developer & Web Designer

---

Located in Michigan, USA

Need a custom HubSpot template or theme? ›

[KongGroup]

 Thanks Jacob.

this is the preview URL link https://www.konggroup.com.au/-temporary-slug-7d72bc1f-d11b-491e-869d-046a7f1ac477?hs_preview=jtirWsj...

The form does not look ok when its published. This is a screenshot of the published form.

As you can see its there is a wider white space on the right side than on the left. Plus the lines on the left side are shorter and for whatever reason bullet points started to come up and some of the lines are half missing. And the title line is missing the upper part.

Not sure what is going on.

When I change the screen size, it stays the same way.

[Jake_Lett · Accepted solution]

The page template is applying custom CSS styles to change things are rendering. Are you familiar with editing CSS code or do you have a developer to help you make code changes?

1. Width of form has a max-width of 500px. The screenshot below shows this rule being applied causing the form to be narrow.

2. The title at the top needs a larger line height for it to not be cropped off. Either delete the line-height:1 or make it larger like 1.2

.contact_form h3 {
    color: #152538;
    font-family: 'Cocogoose';
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    margin: 0 0 80px;
    /* line-height: 1; */
}

3. The bullets need a CSS rule to turn off the bullets

.hs-form ul.inputs-list {
    list-style-type: none;
}