fix: styles (#1125)

* refactor: overview

* fix: i18n

* fix: styles

* fix:  css

* fix: scss

* chore: remove some styles

* fix: styles

Author: Chasen-Zhang

src/components/DocsOverview/index.tsx

@@ -47,6 +47,8 @@ import Link from "@docusaurus/Link";
 import clsx from "clsx";
 const colLayout = { xl: 8, xxl: 8, lg: 8, md: 8, sm: 12, xs: 12 };
 const colLayout2 = { xl: 12, xxl: 12, lg: 24, md: 24, sm: 24, xs: 24 };
+const colLayout3 = { xl: 8, xxl: 8, lg: 8, md: 8, sm: 12, xs: 24 };
+
 const DocsOverview: FC = (): ReactElement => {
   const {
     siteConfig: {
@@ -62,15 +64,15 @@ const DocsOverview: FC = (): ReactElement => {
       >
         <div style={{ height: "100%", width: "100%" }}>
           <Row gutter={[12, 12]} className={styles.topCard}>
-            <Col {...colLayout}>
+            <Col {...colLayout3}>
               <Card href="/guides/overview/editions/dc/" padding={[16, 16]}>
                 <h3>
                   <span>{$t("Databend Cloud")}</span>
                 </h3>
                 <div>{$t("Fully-Managed on Cloud")}</div>
               </Card>
             </Col>
-            <Col {...colLayout}>
+            <Col {...colLayout3}>
               <Card href="/guides/overview/editions/dee/" padding={[16, 16]}>
                 <h3>
                   <span> {$t("Databend Enterprise")}</span>
@@ -80,7 +82,7 @@ const DocsOverview: FC = (): ReactElement => {
                 </div>
               </Card>
             </Col>
-            <Col {...colLayout}>
+            <Col {...colLayout3}>
               <Card href="/guides/overview/editions/dce/" padding={[16, 16]}>
                 <h3>
                   <span>{$t("Databend Cummunity")}</span>

src/css/custom.scss

@@ -296,21 +296,6 @@ div[class*="searchQueryColumn"] {
   display: flex;
   flex-flow: row wrap;
 }
-.ant-row::before,
-.ant-row::after {
-  display: flex;
-}
-.ant-col-md-8 {
-  display: block;
-  flex: 0 0 33.33333333%;
-  max-width: 33.33333333%;
-}
-.ant-col-xl-12 {
-  display: block;
-  flex: 0 0 50%;
-  max-width: 50%;
-}
-
 // antd start
 .ant-input:focus {
   box-shadow: 0px 0px 0px 4px rgba(1, 117, 246, 0.25),
@@ -319,3 +304,15 @@ div[class*="searchQueryColumn"] {
 .ant-modal-root .ant-modal-mask {
   background-color: var(--docsearch-container-background) !important;
 }
+@media (min-width: 1200px) {
+  .ant-col-md-8 {
+    display: block;
+    flex: 0 0 33.33333333%;
+    max-width: 33.33333333%;
+  }
+  .ant-col-xl-12 {
+    display: block;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+}