How to make Podio form mobile responsive?

Follow

Lennie

• February 15, 2017 05:16
• Edited

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

0

• Official comment

  

  Sara Høeg Højlund-Rasmussen

  • November 17, 2016 08:58

  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

  Comment actions Permalink
• 

  Robert Hurra

  • November 16, 2016 08:35

  Do you use Bootstrap?

  0

  Comment actions Permalink
• 

  Lennie

  • November 16, 2016 08:41

  Hey Robert, nope, I didn't use BS

  0

  Comment actions Permalink
• 

  Robert Hurra

  • November 16, 2016 09:19

  Are you sure this is a Podio issue and not html/css? Maybe create a fiddle, https://jsfiddle.net/ and ask on stack overflow?

  0

  Comment actions Permalink
• 

  Lennie

  • November 16, 2016 23:59

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

  0

  Comment actions Permalink
• 

  Lennie

  • November 25, 2016 00:56

  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

  1

  Comment actions Permalink
• 

  Hamish Maclean

  • December 14, 2016 01:06

  Why is this not default CSS?

  0

  Comment actions Permalink
• 

  Brock Taffe

  • October 08, 2017 04:11

  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. 

  0

  Comment actions Permalink
• 

  Sara Høeg Højlund-Rasmussen

  • October 19, 2017 09:43

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

  /Sara - Podio

  0

  Comment actions Permalink
• 

  Kevin Eckley

  • January 25, 2018 18:39

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

  -1

  Comment actions Permalink
• 

  Brock Taffe

  • February 02, 2018 01:02

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

  0

  Comment actions Permalink

Please sign in to leave a comment.