Loading article…
Loading article…
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.
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
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.
#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;
}
}Use only 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"/>');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.