fix: adjust cert logo and grid

client/src/client-only-routes/ShowCertification.js

@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Grid, Row, Col, Image, Button } from '@freecodecamp/react-bootstrap';
+import FreeCodeCampLogo from '../assets/icons/freeCodeCampLogo';
 // eslint-disable-next-line max-len
 import MinimalDonateForm from '../components/Donation/components/MinimalDonateForm';
 
@@ -204,14 +205,7 @@ class ShowCertification extends Component {
             <header>
               <Col md={5} sm={12}>
                 <div className='logo'>
-                  <Image
-                    alt="freeCodeCamp.org's Logo"
-                    responsive={true}
-                    src={
-                      'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo' +
-                      '.svg'
-                    }
-                  />
+                  <FreeCodeCampLogo />
                 </div>
               </Col>
               <Col md={7} sm={12}>

client/src/components/Intro/index.js

@@ -48,19 +48,18 @@ function Intro({
             </h1>
             <Spacer />
           </Col>
-
-          <FullWidthRow className='button-group'>
-            <Link
-              className='btn btn-lg btn-primary btn-block'
-              to={`/${username}`}
-            >
-              View my Portfolio
-            </Link>
-            <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
-              Update my account settings
-            </Link>
-          </FullWidthRow>
         </Row>
+        <FullWidthRow className='button-group'>
+          <Link
+            className='btn btn-lg btn-primary btn-block'
+            to={`/${username}`}
+          >
+            View my Portfolio
+          </Link>
+          <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
+            Update my account settings
+          </Link>
+        </FullWidthRow>
         <Spacer />
         <Row className='text-center quote-partial'>
           <Col sm={10} smOffset={1} xs={12}>

client/src/pages/certification.css

@@ -75,9 +75,10 @@
   margin-left: 100px;
 }
 
-.certification-namespace .logo img {
-  max-width: 500px;
+.certification-namespace .logo svg {
+  height: 100%;
   width: 100%;
+  max-width: 500px;
 }
 
 .certification-namespace .issue-date {
@@ -151,6 +152,36 @@
 }
 
 /*mobile media queries*/
+@media screen and (max-width: 675px) {
+  .certification-namespaces.issue-date {
+    padding: 0;
+    border: 0;
+  }
+
+  .certification-namespace header {
+    height: 190px;
+  }
+
+  .certification-namespace h3 {
+    font-size: 15px;
+  }
+
+  .certification-namespace h1 {
+    font-size: 17px;
+  }
+
+  .certification-namespace h4 {
+    font-size: 15px;
+    margin-top: 20px;
+  }
+}
+
+@media (max-width: 767px) {
+  .certificate-outer-wrapper .donation-section {
+    padding: 20px 20px;
+  }
+}
+
 @media screen and (max-width: 992px) {
   .certification-namespace header {
     height: 160px;
@@ -163,7 +194,7 @@
     height: 80px;
   }
 
-  .certification-namespace .logo img {
+  .certification-namespace .logo svg {
     margin-top: 20px;
   }
 
@@ -199,27 +230,3 @@
     font-size: 28px;
   }
 }
-
-@media screen and (max-width: 675px) {
-  .certification-namespaces.issue-date {
-    padding: 0;
-    border: 0;
-  }
-
-  .certification-namespace header {
-    height: 190px;
-  }
-
-  .certification-namespace h3 {
-    font-size: 15px;
-  }
-
-  .certification-namespace h1 {
-    font-size: 17px;
-  }
-
-  .certification-namespace h4 {
-    font-size: 15px;
-    margin-top: 20px;
-  }
-}