resolved mobile responsive bug (kubeedge#673)

Signed-off-by: harshita91 <roonwal721972@gmail.com>

src/components/about/styles.scss

@@ -1,77 +1,123 @@
+// .aboutContainer {
+//   background-color: rgb(247, 247, 247);
+
+//   @media screen {
+//     @media (max-width: 992px) {
+//       .sectionContainerInner {
+//         .row {
+//           .profile {
+//             flex: 0 0 100%;
+//             max-width: 100%;
+//           }
+//         }
+//       }
+//     }
+//     @media (max-width: 768px) {
+//       .sectionContainerInner {
+//         .row {
+//           .profile {
+//             flex: 0 0 100%;
+//             max-width: 100%;
+//           }
+//         }
+//       }
+//     }
+//   }
+
+//   .row {
+//     display: -ms-flexbox;
+//     display: flex;
+//     -ms-flex-wrap: wrap;
+//     flex-wrap: wrap;
+//     justify-content: center;
+//     margin-right: -15px;
+//     margin-left: -15px;
+
+//     .profile {
+//       flex: 0 0 33.333333%;
+//       max-width: 33.333333%;
+//       text-align: center;
+//       padding: 0px 10px 30px;
+//       position: relative;
+//     }
+
+//     .portrait {
+//       width: 200px;
+//       height: 200px;
+//       margin: 0 auto;
+//       border-radius: 50%;
+//       object-fit: cover;
+//     }
+
+//     .description {
+//       flex: 0 0 66.666667%;
+//       max-width: 66.666667%;
+//       font-size: 1.2rem;
+//     }
+
+//     .name {
+//       font-size: 2em;
+//       font-weight: 400;
+//       margin: 20px 0 10px 0;
+//     }
+
+//     .jobTitle {
+//       font-size: 1rem;
+//       font-weight: 300;
+//       margin: 0px 0 10px 0;
+//     }
+//   }
+// }
+
+// html[data-theme='dark'] {
+//   .aboutContainer {
+//     background-color: #242526;
+//   }
+// }
+
 .aboutContainer {
   background-color: rgb(247, 247, 247);
-
-  @media screen {
-    @media (max-width: 992px) {
-      .sectionContainerInner {
-        .row {
-          .profile {
-            flex: 0 0 100%;
-            max-width: 100%;
-          }
-        }
-      }
-    }
-    @media (max-width: 768px) {
-      .sectionContainerInner {
-        .row {
-          .profile {
-            flex: 0 0 100%;
-            max-width: 100%;
-          }
-        }
-      }
-    }
-  }
+  padding: 60px 0; // Added padding
 
   .row {
-    display: -ms-flexbox;
     display: flex;
-    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     justify-content: center;
-    margin-right: -15px;
-    margin-left: -15px;
+    gap: 40px; // Added gap
+    margin: 0; // Reset margin
+    padding: 0 20px; // Added padding
 
     .profile {
-      flex: 0 0 33.333333%;
-      max-width: 33.333333%;
+      flex: 0 0 300px; // Changed from percentage
       text-align: center;
-      padding: 0px 10px 30px;
-      position: relative;
-    }
+      padding: 0;
 
-    .portrait {
-      width: 200px;
-      height: 200px;
-      margin: 0 auto;
-      border-radius: 50%;
-      object-fit: cover;
-    }
+      .portrait {
+        width: 220px; // Increased from 200px
+        height: 220px; // Increased from 200px
+        margin: 0 auto;
+        border-radius: 50%;
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); // Added shadow
+        border: 4px solid white; // Added border
+      }
 
-    .description {
-      flex: 0 0 66.666667%;
-      max-width: 66.666667%;
-      font-size: 1.2rem;
+      .name {
+        font-size: 2.2em; // Increased from 2em
+        font-weight: 600; // Changed from 400
+        margin: 24px 0 12px 0;
+        color: #1c77c8; // Added color
+      }
     }
 
-    .name {
-      font-size: 2em;
-      font-weight: 400;
-      margin: 20px 0 10px 0;
-    }
+    .description {
+      flex: 0 0 600px; // Changed from percentage
+      font-size: 1.1rem; // Changed from 1.2rem
+      line-height: 1.8; // Added line height
 
-    .jobTitle {
-      font-size: 1rem;
-      font-weight: 300;
-      margin: 0px 0 10px 0;
+      p {
+        color: #444; // Added color
+        margin-bottom: 1.5em; // Added margin
+      }
     }
   }
 }
-
-
-html[data-theme='dark'] {
-  .aboutContainer {
-    background-color: #242526;
-  }
-}

src/components/caseCard/index.js

@@ -4,33 +4,30 @@ import Translate from "@docusaurus/Translate";
 import "./styles.scss";
 
 export default function CaseCard(props) {
-    const {
-        title = "",
-        subTitle = "",
-        date = "",
-        desc = "",
-        imgUrl = "",
-        link = "",
-    } = props;
-    const history = useHistory();
+  const { title, subTitle, date, desc, imgUrl, link } = props;
+  const history = useHistory();
 
-    return (
-        <div
-            className="case-card"
-            style={{
-                backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),url(${imgUrl})`,
-            }}
-        >
-            <h2 className="title" onClick={() => history.push(link)}>
-                {title}
-            </h2>
-            <hr />
-            <h3 className="sub">{subTitle}</h3>
-            <p className="desc">{desc}</p>
-            <div className="date">{date}</div>
-            <a className="button" type="button" onClick={() => history.push(link)}>
-                <Translate>READ CASE STUDY</Translate>
-            </a>
+  return (
+    <div
+      className="case-card"
+      style={{
+        backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(${imgUrl})`,
+      }}
+    >
+      <div className="card-content">
+        <h2 className="title" onClick={() => history.push(link)}>
+          {title}
+        </h2>
+        <hr />
+        {subTitle && <h3 className="sub">{subTitle}</h3>}
+        <p className="desc">{desc}</p>
+        <div className="bottom-section">
+          <span className="date">{date}</span>
+          <button className="button" onClick={() => history.push(link)}>
+            <Translate>READ CASE STUDY</Translate>
+          </button>
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+}