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?
-
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. -
Pam: The width has nothing to do with the font size. Play with the font-size property.
-
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.
-
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:
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. -
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;
} -
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? -
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
-
Hello, I created a youtube video on how to edit the code that Stefan Shared, I hope this helps!
Please sign in to leave a comment.
Comments
18 comments