What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Logo not showing up on smaller viewport

    Asked by LuxuryClothing on May 23, 2017 at 11:30 AM

    When we click on the form the top logo does not show but it shows in Form Preview. Any thoughts?

    Page URL:
    http://www.customshirt1.com/index.php/custommade/customboxers/world-s-<br/>finest-silk-boxer-shorts-handmade-to-order.html

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Kiran on May 23, 2017 at 01:06 PM

    I have checked your JotForm and see that the logo is being displayed normally on the desktop. However, when the form is accessed on a mobile device or lesser screen width the logo is not displaying correctly. 

    Please try injecting the following CSS code to the form so that the top margin of the form will be adjusted on mobile devices and the logo should be displaying properly.

    @media screen and (max-width: 765px) {

      .supernova .form-all {

        margin-top: 210px;

      }

    }

    Please get back to us if you need any further assistance. We will be happy to help. 

  • Profile Image

    Answered by LuxuryClothing on May 23, 2017 at 01:11 PM

    Kiran:

    The attached screenshot is from a 26" desktop monitor and the logo does not show. You can see the bottom pixels of the logo at the top of the screenshot. Any advice?

    Alexander

  • Profile Image
    JotForm Support

    Answered by Jim_R on May 23, 2017 at 02:33 PM

    Hello Alexander, The logo at the top is not fully displaying due to the top margin when your form is being viewed from a smaller viewport. In your screenshot, it was opened as a popup with horizontal scrollbars at the bottom, which implies it's viewed from a small window.

    To fix this, kindly try my colleague's CSS codes. Here it is again for your convenience:

    @media screen and (max-width: 765px) {

      .supernova .form-all {

        margin-top: 210px;

      }

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes

    To put it in perspective, here's how your form looked like:

    1. When viewed on a larger window

    2. And a smaller window

    Alternatively, you may also change the size of the popup by changing your embed codes:

    FROM:

    <a target="_blank" href="javascript:void( window.open( 'https://form.jotform.ca/71416422803247', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500' ) )"><b>Click Here to Tell Us Your Preference</b></a>

    TO:

    <a target="_blank" href="javascript:void( window.open( 'https://form.jotform.ca/71416422803247', 'blank', 'scrollbars=yes, toolbar=no, width=800, height=500' ) )"><b>Click Here to Tell Us Your Preference</b></a>

    Just change the width from 700 to 800.

  • Profile Image

    Answered by LuxuryClothing on May 23, 2017 at 02:36 PM

    Thank you Jim R!