Mobile Responsive Public Pages

The Modern (v2) layout is mobile responsive, but the Classic (v1) layout requires some adjustments to be responsive. See the guide below if you’re using the Classic layout.

Making Classic (v1) Advanced Billing Public Pages Mobile Responsive

Many Advanced Billing merchants have asked us to make Classic Public Signup Pages responsive to provide a better mobile and tablet experience to their customers. Now you can accomplish this using custom CSS and JavaScript!

We’ve recently allowed custom CSS and JavaScript to pass to Receipt pages and Self-Service pages as well. If you add the custom code to the Public Page Default Settings in your Settings tab, the code will apply to all 3 pages.

If you don’t want your Receipt pages or Self-Service pages to be responsive for any reason, you can always apply the custom CSS and JavaScript to each individual Public Signup Page under Setup > Public Signup Pages.

Copy/paste the custom code below into your site settings:

Custom 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

//only use one of the following snippets

//viewport to make things mobile
$(function(){$('<meta name="viewport" content="width=device-width, maximum-scale=1"/>').appendTo($('head'));});

//an alternative viewport
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>');

Support Notes

Please note that this code is provided as an example only and Tier 2 technical support cannot be held responsible for supporting any updates or changes you make to the code.