Post

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

17 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
Comment actions Permalink
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
Comment actions Permalink
0
Avatar

Another thank you from me Stefan :-)

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

Vee Ridgley 0 votes
Comment actions Permalink
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
Comment actions Permalink
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
Comment actions Permalink
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
Comment actions Permalink
0
Avatar

Worked well in mySamsungg S7. 

Apple may need special CSS for retina. 

 

Glauber Carvalho 0 votes
Comment actions Permalink
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
Comment actions Permalink
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
Comment actions Permalink
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
Comment actions Permalink
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
Comment actions Permalink
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
Comment actions Permalink
0
Avatar

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?

Tim Bennett 0 votes
Comment actions Permalink