PayWhirl comes with several different types of payment widgets that can be embedded into your website to allow your customers to subscribe to payment plans, make one-time purchases, login to manage their customer information, update credit cards on file, see upcoming payments, reset passwords, etc.

All PayWhirl widgets and forms are responsive (designed to work on any mobile device, tablet, etc.) and will expand to fill the space that you paste them into. If your page is too narrow then it will force the widget to break down into a vertical / mobile layout. However, you can use custom css to override widget layout changes if you need.

If the space your pasting your widget is at least 997px wide then your widget will display the number of columns you specify in your widget settings (2,3 or 4 columns).

In our example below, we've set our widget to display 3 columns in our widget settings and our page is wide enough to display horizontally in it's full width layout:


However, when the space for the widget is not wide enough (under 997px) the widget will break down into it's vertical / mobile layout like this:

If you need, you can override or force the widget to maintain it's column layout in smaller spaces or on smaller screens by using a few lines of custom css in your widget, under advanced settings:

If you want to force a 2 column layout:

  1.  Set the widget to use 2 columns in the widget settings
  2.  Add the following custom css to your widget settings under advanced:

.col-sm-6 {width: 48%; float: left; margin-left: 2% !important; }

If you want to force a 3 column layout:

  1.  Set the widget to use 3 columns in the widget settings
  2.  Add the following custom css to your widget settings under advanced:

.col-sm-4 {width: 30%; float: left; margin-left: 2% !important; }

If you want to force a 4 column layout:

  1.  Set the widget to use 4 columns in the widget settings
  2.  Add the following custom css to your widget settings under advanced:

.col-sm-3 {width: 22%; float: left; margin-left: 2% !important; }

You can also make changes to the rest of the widget flow by going to the Widgets & Forms > Customer Portal > Style my portal.

NOTE: These are just examples of a few BASIC solutions to alter widget layouts with css...They are not perfect solutions and should be altered / added to depending on your needs. Please note we do not officially support custom css overrides but we're always happy to help if we can so please feel free to reach out with any css questions and we'll do our best to find you a custom solution.

Finally, it should be noted that you can also edit the layout of widgets or ANY page in the customer portal using the PayWhirl Custom Scripts App with either Javascript and/or jQuery.

Related Articles:

How to use custom fonts with PayWhirl

How to install 3rd party scripts for conversion, tracking & customization

PayWhirl developers & experts


Please let us know if you have any questions.

Team PayWhirl

Did this answer your question?