Post

14 followers Follow
0
Avatar

How To Make Podio Forms Mobile Responsive

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?

Kirk Deis

Please sign in to leave a comment.

15 comments

4
Avatar

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.

Stefan Falkboman 4 votes
0
Avatar

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

Pam Rosenberg 0 votes
0
Avatar

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

Robert Taylor 0 votes
0
Avatar

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.

Guido Sondern (cL) 0 votes
1
Avatar

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. 

Alaa Murad 1 vote
0
Avatar

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.

Stefan Falkboman 0 votes
0
Avatar

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. 

Brock Taffe 0 votes
1
Avatar

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;
}

Kevin Eckley 1 vote
0
Avatar

@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!

Guido Sondern 0 votes
0
Avatar

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...

Alban Genty 0 votes