NewMaxio Metering is now available — usage-based billing for Advanced Billing.Learn more
/
DevelopersAdd-OnsSaaSpediaAcademy

Help Center › Billing › Public Pages › Settings

Make Classic Public Pages Mobile Responsive

··

Last updated on Aug 27, 2026

The Modern (v2) layout is mobile responsive by default. The Classic (v1) layout needs custom CSS and JavaScript to become mobile responsive.

This code is provided as an example only. Support can't troubleshoot changes you make to it.

Apply the mobile-responsive code

Custom CSS and JavaScript is available only on paid accounts, and must be enabled by Maxio. See Configuring Public Page Default Settings for where to check this and where to enter the code below.

To make your Classic Public Pages mobile responsive

  1. Copy the CSS below into your Custom CSS field.
  2. Copy one of the JavaScript snippets below into your Custom JavaScript field. Use only one of the two snippets, not both.
  3. Save your settings.

What to expect

Add the code under Public Page Default Settings to apply it to every Public Signup Page, Receipt Page, and Self-Service Page at once. Add it to an individual Public Signup Page's own settings instead, under Catalog > Public Signup Pages > Edit, if you only want that one page to be responsive.

Custom CSS

css
#company img {
  width: 100%;
}
 
#content table {
  width: 100%;
}
 
@media (max-width: 768px) {
  * {
    box-sizing: border-box;
  }
 
  #page_column,
  #content {
    width: 100%;
  }
 
  #errorExplanation h2,
  #total,
  #billing_address,
  .component_configuration,
  .metafield_configuration,
  .section_one,
  .section_two,
  .section_three,
  .section_four,
  .section_five {
    width: 100%;
  }
 
  .row .right {
    float: left;
    margin-top: 5px;
    clear: left;
  }
}
 
@media (max-width: 480px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="submit"] {
    width: 100%;
  }
 
  #subscription_payment_profile_attributes_billing_state,
  #subscription_customer_attributes_state,
  #subscription_customer_attributes_country,
  #subscription_payment_profile_attributes_billing_state,
  #subscription_customer_attributes_country,
  #subscription_customer_attributes_state,
  #subscription_payment_profile_attributes_billing_country {
    width: 100%;
  }
 
  #subscription_submit {
    float: none;
    width: 100%;
    margin-top: 20px;
  }
 
  .hidden-xs {
    display: none;
  }
}

Custom JavaScript

Use only one of the following snippets.

js
// viewport to make things mobile
$(function(){$('<meta name="viewport" content="width=device-width, maximum-scale=1"/>').appendTo($('head'));});
js
// an alternative viewport
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>');

See Configuring Public Page Default Settings for the site-wide Custom CSS and Custom JavaScript fields.

See Scope Custom JavaScript to a Specific Page if you only want this to apply to some of your pages.

Still need help?
Reach out and our support team will take it from here.

Contact support