Our documentation has moved!

You are currently viewing a legacy version of our help articles.
For the most up-to-date version, please use the new Chargify Help & Support Site.
Follow

Making Chargify Public Pages Responsive

Many Chargify merchants have asked us to make 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"/>');

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.

Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk