Fix column width on the home page

src/components/HomepageFeatures/index.js

@@ -78,7 +78,7 @@ const FeatureList = [
 function Feature({ Svg, title, link, description }) {
   return (
 
-    <div className={clsx('col col--3')}>
+    <div className={clsx('col col--3', styles.featureBlock)}>
       <div className="text--center">
         <a href={link} target='_blank' className={styles.featureLink}>
           <Svg fill="currentColor" className={styles.featureSvg} role="img" />

src/components/HomepageFeatures/styles.module.css

@@ -5,6 +5,10 @@
   width: 100%;
 }
 
+.featureBlock {
+  padding-bottom: 1rem;
+}
+
 .featureSvg {
   height: 100px;
   width: 100px;

src/css/custom.css

@@ -31,3 +31,15 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
   --ifm-link-color: var(--ifm-color-primary-darker);
 }
+
+@media (max-width: 996px) {
+  .col {
+    --ifm-col-width: 50%;
+  }
+}
+
+@media (max-width: 500px) {
+  .col {
+    --ifm-col-width: 100%;
+  }
+}

src/pages/index.js

@@ -15,7 +15,7 @@ function HomepageHeader() {
         <Heading as="h1" className="hero__title">
           Yehor Vialov
         </Heading>
-        <p className="hero__subtitle">Public Profiles</p>
+        <p className="hero__subtitle">Public profiles and publications</p>
         {/* <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"