The form changes my web page layout

  • Profile Image
    kseiz
    Asked on March 15, 2021 at 07:56 PM

    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.

  • Profile Image
    tommy
    Answered on March 16, 2021 at 03:45 AM

    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.

  • Profile Image
    kseiz
    Answered on March 16, 2021 at 09:44 AM

    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

    ...

    1615909662_6050d31e76fef_Screen Shot 2021615909661_6050d31ded96a_Screen Shot 2021615909661_6050d31dbb49c_Screen Shot 2021615909661_6050d31da532d_Screen Shot 202

  • Profile Image
    Anthony_Evans
    Answered on March 16, 2021 at 12:25 PM

    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!

  • Profile Image
    kseiz
    Answered on March 16, 2021 at 01:37 PM

    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.

  • Profile Image
    Anthony_Evans
    Answered on March 16, 2021 at 03:21 PM

    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.

    1615922376_605104c8a6f80_squooshed.gif

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

    Thank you for your patience!

  • Profile Image
    kseiz
    Answered on March 16, 2021 at 03:25 PM

    Genius! It works! Thank you so much!