Stylesheet - Form - Design Manager Preview different to Website page

SOLVE
Highlighted
Occasional Contributor

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.

 

2020-09-12 15_09_10-0101 Pre-Construction Information.png

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.

2020-09-12 15_10_25-https___www.konggroup.com.au_-temporary-slug-42fb8ea5-01ac-4165-8bd6-a3a1bfe8ceb.png

 

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.

2020-09-12 15_09_37-Forms _ HubSpot.png

 

 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Top Contributor

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.

Screen Shot 2020-10-01 at 9.33.27 AM.png

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;
}

 

 


Jacob Lett
Marketing Consultant
Strategic marketing consultant and skilled web designer specializing in the manufacturing industry to increase revenue through driving website leads and brand awareness.

View solution in original post

3 Replies 3
Highlighted
Top Contributor

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


bootstrapcreative-horizontal-trim.png

Located in Michigan, USA

Need a custom HubSpot template or theme? 


Jacob Lett
Marketing Consultant
Strategic marketing consultant and skilled web designer specializing in the manufacturing industry to increase revenue through driving website leads and brand awareness.

Highlighted
Occasional Contributor

 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.

KongGroup_1-1601447212073.png

 

 

Reply
0 Upvotes
Highlighted
Solution
Top Contributor

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.

Screen Shot 2020-10-01 at 9.33.27 AM.png

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;
}

 

 


Jacob Lett
Marketing Consultant
Strategic marketing consultant and skilled web designer specializing in the manufacturing industry to increase revenue through driving website leads and brand awareness.

View solution in original post