Logo is not resizing to fit on a small screen such as a mobile phone

Can you help me with making the logo resize correctly to the size screen its being used on? Also wonder why the white box around the form content is against the edge of the screen on the left but has a gap on the right. Thank you!

Please add the following CSS codes to your form to resolve both issues:

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

.form-all:before {

    background-size: 100% !important;

     top: -100px !important;

} 

  .jotform-form .form-all {

    margin: 10px;

}

}

How to Inject Custom CSS Codes

Here is my demo: https://form.jotform.com/80214019746958 

Feel free to test it and clone it. 

Hope this helps to solve the issues. 

Thank you for the quick response! That did fix it for anything with a width of 480 or less. It still doesn't shrink the logo from 481 up to 720 and the form content box is still against the edge from 480 up to 767 (as seen from adjusting screen size with chrome developer tool). See example screenshots below.

Please add this CSS code to your form as well:

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

  .form-all:before {

    background-size: 100% !important;

} 

}

Here is my new form: https://form.jotform.com/80214505346954