The form changes my web page layout

When I insert the form, it changes my web page layout (which is responsive). Do I need to add anything to my .css file to keep this from happening?

I am using Dreamweaver 2021.

Hello,

As per your request, I have checked your form and website. However, I did not notice any layout issue. To assist you better, can you provide us with the details of your feedback? 

Please send us a screenshot of the issue. If you do not know how to send a screenshot to the support forum, please visit this guide.

We are waiting for your reply.

Well 2 things are happening:

1. The logo at the top by my navigation is getting pushed above the

navigation.

2. The footer at the bottom isn't responsive -- it's getting cut off at the

edges.

See attachments -- I show the form page -- top and bottom and then a normal

page -- top and bottom.

Kimberly Seiz

Graphic Arts Instructor

Capital Area Career Center

2201 Toronto Road

Springfield, IL 62712

217-529-5431, ext. 188

...

Hi kseiz,

Thank you so much for the additional information!

I have gone through and compared the computed styles between one of your non-form pages and the page with the embedded JotForm. It appears most of the issues stem from the JotForm css overriding your body element styles in style.css on line 78.

Please adjust your css in style.css so that it will take precedence over the JotForm css. You can do so by replacing the body block with this:

body {font-family: 'Open Sans', sans-serif !important;font-size: 12px !important;line-height: 18px !important;color: #333; /* Fix for webkit rendering */-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: 100%;}

Aside from manually setting the line-height, the only big difference is those !important bits. They tell the browser that the css code should not be overridden, no matter what. The line height was previously set to a relative unit that changes depending on the values of it's parent. Setting it to a fixed 18px ensures the same view no matter the content, and it's a small enough value that it shouldn't affect mobile responsiveness. Also, once you have updated your css file on the server, use Shift + F5 to do a full reload of your webpage!

Please try out this solution and let me know how it works for you!

It works for the top navigation -- but the footer at the bottom is still cut off. If it can't be fixed, I'm ok with that for just this page.

Hey kseiz,

So it appears that the .container class is what's causing the spacing on either side of the footer. Please remove the container class from the div element that is the parent to your footer. The container class IS helping your header appear correctly, ensure that that one is not removed.

Should be pretty straight forward to just pull that class from the HTML file.

Thank you for your patience!

Genius! It works! Thank you so much!