How To Make Podio Forms Mobile Responsive

Follow
Kirk Deis

I'm using a podio form on my website but it is NOT mobile responsive. I reached out to the Podio team and they recommended leaving a post here to see if anyone has the CSS to make it mobile responsive. Anyone have any ideas?

0

Comments

18 comments

Date Votes
  • Stefan Falkboman
    • Edited

    Hi Kirk, its very strange its not responsive per default. Support and devs are hopefully busy solving this issue.

    The CSS below worked for me after a little fiddeling around.

    div.container {
      width: 100% !important;
    }
    form#webform.webforms {
      width: 100% !important;
    }

    Note:
    You have to add the CSS above in the Podio Webform section, not in your own stylesheet.

    4
    Comment actions Permalink
  • Kirk Deis

    Thanks Stefan! The CSS code worked like a charm! 

    0
    Comment actions Permalink
  • Pam Rosenberg

    Hi gang. I entered the CSS and even adjusted it to 50% but the font is still tiny on my iphone. Any ideas?

    0
    Comment actions Permalink
  • Vee Ridgley

    Another thank you from me Stefan :-)

    I'm really surprised this isn't built in though.

    0
    Comment actions Permalink
  • Stefan Falkboman

    Pam: The width has nothing to do with the font size. Play with the font-size property.

    0
    Comment actions Permalink
  • Robert Taylor

    Stefan, that css worked great! And looks like a lot of upset Podio customers from that link you gave.

    0
    Comment actions Permalink
  • Guido Sondern (cL)

    Hi all,

    I did try Stefan's Code and even tweaked the form a little myself... Though it is kind of responsive, it kind of is not. I loaded the webform on my iPhone for example and it looks like this:


    This might be what Pam is referring to. 

    Would be ideal, if the Themes already integrate the HTML viewport meta or let us fiddle with it.
    Something like this: <meta name="viewport" content="width=device-width, initial-scale=1.0">

    This we cannot do in CSS.

    0
    Comment actions Permalink
  • Alaa Murad

    Stefan's hack works well in Desktop and Android, but my site still broken in iOS / iPhone !

    After hours of working on this issue, I wasn't able to fix it, the iFrame keep extending (a bit to 100%) 

    My mobile site looks perfect, the only JUNK part is Podio Form ... time to move to better product (totally unhappy customer), we are a mobile development company and it would be shameful to have a page broken in mobile. 

    1
    Comment actions Permalink
  • Glauber Carvalho
    • Edited

    Worked well in mySamsungg S7. 

    Apple may need special CSS for retina. 

     

    0
    Comment actions Permalink
  • Stefan Falkboman

    Alaa:
    First of all its a Podio feature to add custom CSS - not a hack. Second it sure works for iphone, might be something else your doing wrong in your code (although it would be easier if it was built in), so no need to abondon Podio for this. To edit viewport like is suggested is not needed in the iframe.

    0
    Comment actions Permalink
  • Brock Taffe

    None of these options work correctly on my forms. Even if it's the only thing in the Custom CSS. Testing on iPhone as this is the largest userbase. 

    0
    Comment actions Permalink
  • Kevin Eckley

    Here is the code I have been using. Makes the webform mobile responsive on iPhone and keeps the webform centered when viewing on desktop.

    div.container {
    width: 100% !important;
    }
    form#webform.webforms {
    width: 100% !important;
    }
    #webforms__fields-container {
    max-width: 500px !important;
    margin: 0 auto;
    }
    #webform.webforms button {
    display: block;
    margin: 0 auto;
    }

    1
    Comment actions Permalink
  • Guido Sondern

    @Kevin Eckley

    Can you post a (dummy) webform here that uses your code? I would really like to see a working solution in real life. :-)

    Much appreciated!

    0
    Comment actions Permalink
  • Agarre Tecnologia

    Thanks Kevin Eckley!

    0
    Comment actions Permalink
  • Alban Genty

    Hi,

    I used the code of @Kevin Eckley and it worked well! Thank you for that!

    BUT unfortunately the Captcha Box is not aligned anymore with the form fields. Do you have any solution for this issue? Would be great...

    0
    Comment actions Permalink
  • Tim Bennett
    • Edited

    I have developed it and here is my working solution, but it is not responsive, I have checked it on ami.responsivedesign.is
    click on below link it will show you apply here button click on apply here button it will open form, which is developed in podio and is not responsive.
    https://jram746.wixsite.com/website/membership
    Can Anyone help me in this regard?

    0
    Comment actions Permalink
  • Willem Dewulf

    Hi all,

    With Momentum we've build a Podio extension that allows you to create mobile responsive webforms. 

    You can find more info on this on the extension page: https://podio.com/extensions/947 

    1
    Comment actions Permalink
  • Mitch Durfee

    Hello, I created a youtube video on how to edit the code that Stefan Shared, I hope this helps!

    https://youtu.be/DEKhCzow9bc

    0
    Comment actions Permalink

Please sign in to leave a comment.

Didn't find what you were looking for?

New post
Powered by Zendesk