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 @@
-
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;