diff --git a/client/src/components/Donation/Donation.css b/client/src/components/Donation/Donation.css index 8a20db1628..8fd0562a79 100644 --- a/client/src/components/Donation/Donation.css +++ b/client/src/components/Donation/Donation.css @@ -1,5 +1,5 @@ .donation-modal { - font-size: 0.8rem; + overflow-y: auto; } .donation-modal p { @@ -16,9 +16,6 @@ font-size: 1.2rem; } -.donation-modal .donation-form { - width: 60%; -} .donation-form { display: flex; flex-direction: column; @@ -27,6 +24,23 @@ margin: 0 auto; } +@media (max-width: 500px) { + .donation-form { + width: 100%; + } +} + +.donation-modal .btn-link { + border: none; + text-decoration: underline; + background: transparent; +} +.donation-modal .btn-link:hover { + background: var(--tertiary-background); + text-decoration: none; + color: inherit; +} + .donation-elements { display: flex; flex-direction: column; diff --git a/client/src/components/Donation/components/DonateForm.js b/client/src/components/Donation/components/DonateForm.js index 954e30d8b4..7cca4eab04 100644 --- a/client/src/components/Donation/components/DonateForm.js +++ b/client/src/components/Donation/components/DonateForm.js @@ -8,7 +8,9 @@ import { ControlLabel, Form, FormControl, - FormGroup + FormGroup, + Row, + Col } from '@freecodecamp/react-bootstrap'; import { injectStripe } from 'react-stripe-elements'; @@ -162,34 +164,35 @@ class DonateForm extends Component { renderDonateForm() { const { isFormValid } = this.state; return ( -
- freeCodeCamp.org is a tiny nonprofit that's helping millions of people - learn to code for free. -
-- Join {donationsLocale} supporters. -
-- Your $5 / month donation will help keep tech education free and open. -
-+ freeCodeCamp.org is a tiny nonprofit that's helping millions of people + learn to code for free. +
++ Join {donationsLocale} supporters. +
++ Your $5 / month donation will help keep tech education free and open. +
+ +