I am using a form on a responsive magento site, and would like the form to be responsive as well.

  • Profile Image
    iphonesplus
    Asked on April 30, 2013 at 04:15 PM

    http://iphonesplus.com/trade-sell is where the form is located, and it works fine on the desktop but makes the page stretch out even though its a mobile optimized page. happens in both iOS safari and chrome

     

  • Profile Image
    jonathan
    Answered on April 30, 2013 at 04:55 PM

    Hi,

    Although I was able to see the form just fine on an iPhone

     

    I suggest you still adjust the form's width to maximize the consistency of display on smaller mobile devices.

     

    Please try this changes. Inform is if this did not make any difference.

    Thanks.

  • Profile Image
    jonathan
    Answered on April 30, 2013 at 04:59 PM

    In case my previous suggestions still do not work for you.

    Please try also the solution provided by our colleague EltonCris on this thread

    http://www.jotform.com/answers/194399-text-boxes-too-wide-on-mobile-view

    =======================

    To fixed the text box width on mobile devices, you can use the following CSS. Simply inject it to your form.

    @media only screen and (max-device-width: 550px){

    .form-textbox{

    width:300px !important;

    min-width:300px !important;

    max-width:300px !important;

    }

    }

    Feel free to change 300px width to your preference.

    For the transparency on IE, simply insert the following property under .form-textbox, .form-textarea class on the existing CSS injected to your form.

    filter:alpha(opacity=50);

    If you require assistance with this, let us know so we can help you apply these to your form. Thanks!

    ----------------------------------------------------------------------------------

  • Profile Image
    iphonesplus
    Answered on April 30, 2013 at 05:02 PM

    That emulator is quite outdated, thats not how the form looks like on an actual iphone.  I got it looking better, but now it seems to have made this blank white gap on the right of mobile devices screen.

     

    see this screenshot

    http://imgur.com/uRDyEzL

  • Profile Image
    iphonesplus
    Answered on April 30, 2013 at 05:23 PM

    fixed

  • Profile Image
    EltonCris
    Answered on April 30, 2013 at 05:37 PM

    @iphonesplus 

    Glad to hear it. Thank you for letting us know. 

    If you have any other questions or concerns, feel free to message us here. Cheers!