diff --git a/kuma/payments/jinja2/payments/includes/payments-form.html b/kuma/payments/jinja2/payments/includes/payments-form.html
index 18d114ad30..7942a7599c 100644
--- a/kuma/payments/jinja2/payments/includes/payments-form.html
+++ b/kuma/payments/jinja2/payments/includes/payments-form.html
@@ -45,21 +45,15 @@
-
+ {{form.accept_checkbox}}
+
+
By clicking this button, I authorize Mozilla to charge
this payment method $8
each month, according to the Payment Terms , until
I cancel my subscription.
- {{form.accept_checkbox}}
-
-
- By clicking this button, I authorize Mozilla to charge
- this payment method $8
- each month, according to the Payment Terms , until
- I cancel my subscription.
-
diff --git a/kuma/static/js/components/payments/payments-handler.js b/kuma/static/js/components/payments/payments-handler.js
index 0b3e383f15..d7419fc343 100644
--- a/kuma/static/js/components/payments/payments-handler.js
+++ b/kuma/static/js/components/payments/payments-handler.js
@@ -256,7 +256,7 @@
&& isPopoverBanner
? '/month'
: '';
- amountToUpdate[2].textContent = newValue;
+ amountToUpdate[1].textContent = newValue;
}
/**
diff --git a/kuma/static/styles/components/payments/form.scss b/kuma/static/styles/components/payments/form.scss
index a29a36d8ad..2cd80b08df 100644
--- a/kuma/static/styles/components/payments/form.scss
+++ b/kuma/static/styles/components/payments/form.scss
@@ -15,13 +15,14 @@
}
.legal-copy {
+ display: inline-block;
font-size: 12px;
font-weight: normal;
letter-spacing: .1px;
line-height: 1.35;
margin-bottom: 18px;
- @media #{$mq-small-desktop-and-up} {
+ @media #{$mq-large-desktop-and-up} {
text-align: left;
}
@@ -37,6 +38,14 @@
display: flex;
position: relative;
+ .legal-copy {
+ max-width: 370px;
+
+ @media #{$mq-large-desktop-and-up} {
+ max-width: 420px;
+ }
+ }
+
.errorlist {
bottom: 0;
font-size: 12px;
@@ -68,6 +77,7 @@
}
.control-indicator {
+ display: inline-block;
border: 3px solid $text-color;
border-radius: 4px;
box-sizing: border-box;
@@ -75,6 +85,7 @@
height: 28px;
margin-right: 6px;
width: 28px;
+ vertical-align: top;
&:before {
border: 2px solid #fff;