Fix: Layout issue on documentation homepage

README.md

@@ -94,4 +94,4 @@ of the project/
 
 ### License
 
-stylex is [MIT licensed](./LICENSE).
+StyleX is [MIT licensed](./LICENSE).

apps/docs/src/pages/index.js

@@ -132,6 +132,8 @@ export default function Home() {
   );
 }
 
+const CTA_BREAK = '@media (max-width: 360px)';
+
 const styles = stylex.create({
   main: {
     flexGrow: 1,
@@ -181,11 +183,23 @@ const styles = stylex.create({
     opacity: 0.7,
   },
   ctaSection: {
+    alignItems: 'center',
     display: 'flex',
     gap: '1rem',
-    margin: '4rem',
+    justifyContent: 'center',
+    marginBlock: {
+      default: '4rem',
+      [CTA_BREAK]: '2rem',
+    },
+    flexDirection: {
+      default: 'row',
+      [CTA_BREAK]: 'column',
+    },
   },
   cta: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     borderRadius: 8,
     color: {
       default: 'var(--fg1)',
@@ -195,6 +209,10 @@ const styles = stylex.create({
       default: 'none',
       ':hover': 'none',
     },
+    width: {
+      default: 'null',
+      [CTA_BREAK]: '100%',
+    },
     backgroundColor: 'hsl(var(--pink-h), var(--pink-s), var(--pink-l))',
     paddingBlock: '0.75rem',
     paddingInline: '2rem',