feat: adjust syles

freeCodeCamp · Dec 1, 2019 · 1566045 · 1566045
1 parent ff22e03
commit 1566045
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/client/src/components/Donation/Donation.css b/client/src/components/Donation/Donation.css
@@ -163,16 +163,12 @@ li.disabled > a {
   padding: 20px;
 }
 
-.donation-modal p {
-  margin: 0;
-}
-
 .heart-icon-contaier {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin: 30px;
+  margin: 40px;
 }
 
 .heart-icon {
@@ -195,3 +191,30 @@ li.disabled > a {
     transform: scale(1);
   }
 }
+
+.donation-modal p {
+  margin: 0;
+  text-align: center;
+  font-weight: 700;
+  font-size: 1.2rem;
+}
+
+.donation-modal .modal-title {
+  text-align: center;
+  font-weight: 700;
+  font-size: 1.5rem;
+}
+
+@media screen and (max-width: 991px) {
+  .heart-icon-contaier {
+    margin: 30px;
+  }
+  .donation-modal p {
+    font-weight: 400;
+    font-size: 1rem;
+  }
+  .donation-modal .modal-title {
+    font-weight: 600;
+    font-size: 1.2rem;
+  }
+}
diff --git a/client/src/components/Donation/components/DonationModal.js b/client/src/components/Donation/components/DonationModal.js
@@ -55,7 +55,7 @@ class DonateModal extends Component {
     return (
       <Modal bsSize='lg' className='donation-modal' show={show}>
         <Modal.Header className='fcc-modal'>
-          <Modal.Title className='text-center'>
+          <Modal.Title className='modal-title text-center'>
             <strong>Support freeCodeCamp.org</strong>
           </Modal.Title>
         </Modal.Header>