Form Width Not Correctly Displayed on Mobiles and Desktop

  • Profile Image
    AEGOrganiser
    Asked on March 24, 2018 at 03:34 AM

    I have a form which will be used on mobiles and desktops, and I would like to embed it within another website. However I'm having trouble with the width of the form.

    If I just embed it then it is too wide on a desktop, perfect on mobile portrait, and far too wide on mobile landscape. The use of iframes does not change anything.

    I can use CSS to change control the width of the form but then it is too wide for mobile portrait or landscape.

    Even if I don't embed the form and access it directly then the desktop is fine, as is mobile portrait  but again mobile landscape is to wide.

    Do you have any suggestions?

    On a similar note if I use a wide logo, this presents correctly on a desktop but never on a mobile either in landscape or portrait.

    Again do you have any suggestions?

    Regards,

    Malcolm

  • Profile Image
    Adrian
    Answered on March 24, 2018 at 09:12 AM

    I suggest you remove the logo from your form and add it as an Image element instead.

    15218968401.png

    Also, change the width of the form to something smaller like 690px.

    15218969782.png

    Then, add the following Custom CSS to your form.

    img.form-image {

      width: 100% !important;

      height: auto !important;

      max-width: 100% !important;

    }


    .form-all {

      margin-left: auto !important;

      margin-right: auto !important;

    }


    (How to Inject Custom CSS Codes)

    Let us know if you need further assistance.