Post

7 followers Follow
0
Avatar

How to make Podio form mobile responsive?

Hi,

I've created some webforms using Podio and embedded in onto my website. It looks good on laptop and desktop, but I checked it on my mobile and all the forms aren't responsive.

This is the CSS code I'm using but seems like this thing doesn't work

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

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

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

Thanks

Lennie

Official comment

Avatar

You can also add the rule:

.webforms { width: auto !important; } in the embed code, then the webform is gonna be responsive on mobile :)

//Sara - Podio

Sara Høeg Højlund-Rasmussen

Please sign in to leave a comment.

11 comments

0
Avatar

I'm not so sure about that, but my CSS/ HTML is just pretty simple and all. Here it is:

 

div.container {
  width: 100% !important;
}
form#webform.webforms {
  width: 100% !important;
}
body {
  color: #002D62;
  font-family: "Helvetica";
  font-size: 16px;
  background-color: #fff;
}
.container {
  background-color: #fff;
  width: 100%;
}
.btn-primary {
  background-color: #B50938;
  border-color: #B50938;
  color: #fff;
  width: 100%;
}
.input-group-addon {
  background-color: #fff;
  color: #fff;
}
a:hover {
  color: #002D62;
}
a:link {
  color: #002D62;
}
.btn-primary:hover {
  background-color: #002D62;
  border-color: #002D62;
  color: #fff;
}
.webforms .rdtPicker {
  background: #fff none repeat scroll 0 0;
}
.webforms__label {
  font-family: "Helvetica";
  font-size: 16px;
}
.help-block {
  color: #768594;
}

Lennie 0 votes
1
Avatar

Hello  Sara, I did put the ".webforms { width: auto !important; }" on the embed code but it's still not mobile responsive. Or perhaps I'm doing some mistake. Thanks

Lennie 1 vote
0
Avatar

Yeah @Sara Høeg, that doesn't work. It's been the response for a while that the Podio team doesn't think this is an issue. If you could get this working on our workspace it would be great. As we have issues with the Web Form constantly because it isn't mobile friendly and responsive. 

Brock Taffe 0 votes
0
Avatar

Hi @Brock Taffe, let me know in a private support ticket and we will be happy to look into your specific form.

/Sara - Podio

Sara Høeg Højlund-Rasmussen 0 votes
-1
Avatar

This is the css code I use to make my webform mobile responsive:

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 votes
0
Avatar

Still no resolve, very disappointing. Please let me know once a proper feature has been released. 

Brock Taffe 0 votes