fix(client): make certification responsive (#41222)

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

@@ -162,7 +162,6 @@ const ShowCertification = props => {
       !isDonating
     ) {
       setIsDonationDisplayed(true);
-
       executeGA({
         type: 'event',
         data: {
@@ -265,7 +264,7 @@ const ShowCertification = props => {
   );
 
   let donationSection = (
-    <Grid className='donation-section'>
+    <div className='donation-section'>
       {!isDonationSubmitted && (
         <Row>
           <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
@@ -273,22 +272,27 @@ const ShowCertification = props => {
           </Col>
         </Row>
       )}
+      <Row>
+        <Col md={8} mdOffset={2} xs={12}>
           <DonateForm
             handleProcessing={handleProcessing}
             defaultTheme='light'
             isMinimalForm={true}
           />
+        </Col>
+      </Row>
       <Row>
         <Col sm={4} smOffset={4} xs={6} xsOffset={3}>
           {isDonationSubmitted && donationCloseBtn}
         </Col>
       </Row>
-    </Grid>
+      <Spacer size={2} />
+    </div>
   );
 
   const shareCertBtns = (
     <Row className='text-center'>
-      <Spacer size={2} />
+      <Col xs={12}>
         <Button
           block={true}
           bsSize='lg'
@@ -312,14 +316,16 @@ const ShowCertification = props => {
         >
           {t('profile.add-twitter')}
         </Button>
+      </Col>
+      <Spacer size={2} />
     </Row>
   );
 
   return (
-    <div className='certificate-outer-wrapper'>
+    <Grid className='certificate-outer-wrapper'>
+      <Spacer size={2} />
       {isDonationDisplayed && !isDonationClosed ? donationSection : ''}
-      <Grid className='certificate-wrapper certification-namespace'>
-        <Row>
+      <Row className='certificate-wrapper certification-namespace'>
         <header>
           <Col md={5} sm={12}>
             <div className='logo'>
@@ -381,12 +387,12 @@ const ShowCertification = props => {
           </Row>
         </footer>
       </Row>
-      </Grid>
+      <Spacer size={2} />
       {signedInUserName === username ? shareCertBtns : ''}
       <Spacer size={2} />
       <ShowProjectLinks user={user} name={displayName} certName={certTitle} />
       <Spacer size={2} />
-    </div>
+    </Grid>
   );
 };
 

client/src/pages/certification.css

@@ -13,12 +13,13 @@
   margin: 12px 0;
 }
 
-.certification-namespace.container {
+.certification-namespace {
   max-width: 1500px;
   width: 100%;
   padding: 30px;
   border: var(--theme-color) 15px solid;
   border-radius: 3px;
+  background-color: var(--gray-00);
 }
 
 .certification-namespace .row {
@@ -39,11 +40,6 @@
   align-items: center;
   min-height: 100vh;
   flex-direction: column;
-  padding: 50px;
-}
-
-.certificate-outer-wrapper .donation-section {
-  padding-bottom: 100px;
 }
 
 .certificate-outer-wrapper .donation-section hr {
@@ -263,5 +259,4 @@
 
 .certificate-outer-wrapper {
   margin-top: calc(-1 * var(--header-height));
-  background-color: #fff;
 }