Where should we add the code that changes the size of the feedback popup on our website page?

  • Profile Image
    rbroadfo
    Asked on July 16, 2015 at 01:12 PM

    Can you please give more instructions where to put this code the webpage's html? I have added to the code already to change the size of the Feedback button. Here's what I tried at http://www.bigsmilescompany.com/rabbit.html:

    <!DOCTYPE html>

    <html>

    <head>

       <style type="text/css">

    .jotform-feedback-link {

         padding: 15px 40px !important;

    font-size: 30px !important;

     }   

       </style>

       </head>

       .jt-content

    {

       min-width: 700px !important;

       width: 700px !important;

       max-width:700px;

    }

     

    .jt-content .js-form-content

    {

        width:100% !important;

    }

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  • Profile Image
    Ben
    Answered on July 16, 2015 at 01:25 PM

    You were correct in adding the CSS:

    .jt-content
    {
       min-width: 700px !important;
       width: 700px !important;
       max-width:700px;
    }
    .jt-content .js-form-content
    {
        width:100% !important;
    }

    at the top of your page, but there are few issues with the way elements are formed.

    Within HTML page you can have 1 head and 1 body and head is always at the top.

    Now, the head element starts with <head> and finishes with </head> and everything in between is the meta keys, js and CSS resources.

    Now CSS, must be within the <style></style> elements.

    If you take a look at the CSS above, what happened is that your head and style elements started good, but instead of having <body> element start, there is now CSS code and another start of the <head> element.

    So the correct code would be:

    <!DOCTYPE html>
    <html>
      <head>

       <style type="text/css">
         .jotform-feedback-link {
           padding: 15px 40px !important;
           font-size: 30px !important;
         }
         .jt-content
         {
           min-width: 700px !important;
           width: 700px !important;
           max-width:700px;
         }
         .jt-content .js-form-content
         {
           width:100% !important;
         }
       </style>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     </head>

    Notice how the content type meta parameter is now within the head element and how the entire CSS code is within the style element.

    Now, since I see that your page has a lot more elements in its head section, what I would suggest is to just add the following code to your page's head:

       <style type="text/css">
         .jt-content
         {
           min-width: 700px !important;
           width: 700px !important;
           max-width:700px;
         }
         .jt-content .js-form-content
         {
           width:100% !important;
         }
       </style>

    That will be enough for you to have the CSS code apply its styles to your popup form.

    If there are any issues with that however, just let us know and we would be happy to check and assist in sorting it all out for you :)

  • Profile Image
    rbroadfo
    Answered on July 17, 2015 at 09:13 AM

    Thank you!