certificate-redesign

community/public/css/style.css

@@ -1390,29 +1390,30 @@ pre {
   display: none;
 }
 
-.certificate-page .common-card-style {
-  color: black;
-  font-size: 1.25rem;
-}
-
 .certificate-content {
-  padding: 5rem 9rem;
+  padding: 2.5rem 3rem;
 }
 
 .certificate-footer {
-  margin-bottom: 4rem;
+  margin-top: 4.5rem;
+  display: flex;
+}
+
+.certificate-footer-item {
+  margin-right: 3.5rem;
 }
 
 .certificate-ribbon {
   background-color: var(--primary-color);
-  margin-right: 3rem;
-  width: 5%;
+  margin-left: auto;
+  margin-right: 2.5rem;
+  width: 4.5rem;
 }
 
 .certificate-heading {
   font-size: 3rem;
-  margin-bottom: 3rem;
-  font-weight: bold;
+  font-weight: 500;
+  color: var(--text-color);
 }
 
 .certificate-para {
@@ -1420,13 +1421,7 @@ pre {
 }
 
 .certificate-logo {
-  height: 30px;
-}
-
-@media (max-width: 1024px) {
-  .certificate-content {
-    padding: 3rem 5rem;
-  }
+  height: 20px;
 }
 
 @media (max-width: 768px) {
@@ -1435,22 +1430,27 @@ pre {
   }
 }
 
-@media (max-width: 500px) {
-  .certificate-page .common-card-style {
-    font-size: 1rem;
+@media (max-width: 550px) {
+  .certificate-footer {
+    flex-direction: column;
   }
-  .certificate-content {
-    padding: 3rem;
-  }
-  .certificate-ribbon {
-    background-color: var(--primary-color);
-    margin-right: 2rem;
-    width: 20%;
+
+  .certificate-footer-item {
+    margin-bottom: 1rem;
   }
 }
 
-@media (max-width: 375px) {
+@media (max-width: 500px) {
+  .certificate-heading {
+    font-size: 1.5rem;
+  }
+
   .certificate-content {
-    padding: 2rem;
+    padding: 2.5rem 2rem;
+  }
+
+  .certificate-ribbon {
+    margin-right: 1rem;
+    width: 1.5rem;
   }
 }