adjust mobile styling

coinbase · Aug 8, 2024 · 3d589d4 · 3d589d4
1 parent ce10c56
commit 3d589d4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -14,7 +14,7 @@ export default function Page() {
   return (
     <div className="flex h-full w-96 max-w-full flex-col md:w-[1008px]">
       <section className="mt-6 mb-6 flex w-full flex-col md:flex-row">
-        <div className="flex w-full flex-col items-center justify-between gap-2 md:flex-row md:gap-0">
+        <div className="flex w-full flex-row items-center justify-between gap-2 md:gap-0">
           <a
             href={ONCHAINKIT_LINK}
             title="onchainkit"
@@ -23,13 +23,13 @@ export default function Page() {
           >
             <OnchainkitSvg />
           </a>
-          <div className="flex gap-3 pt-3 md:pt-0">
+          <div className="flex gap-3 items-center">
             <SignupButton />
             {!address && <LoginButton />}
           </div>
         </div>
       </section>
-      <section className="templateSection flex w-full grow flex-col items-center justify-center gap-4 rounded-xl md:bg-gray-100">
+      <section className="templateSection flex w-full md:grow flex-col items-center justify-center gap-4 rounded-xl bg-gray-100 py-4 px-2">
         <div className="flex h-[450px] w-[450px] max-w-full items-center justify-center rounded-xl bg-[#030712]">
           <div className="rounded-xl bg-[#F3F4F6] px-4 py-[11px]">
             <p className="font-normal text-indigo-600 text-xl not-italic tracking-[-1.2px]">
@@ -50,3 +50,4 @@ export default function Page() {
     </div>
   );
 }
+
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -19,9 +19,9 @@ const docLinks = [
 
 export default function Footer() {
   return (
-    <section className="mt-12 mb-6 flex w-full flex-col justify-between gap-2 pb-4 md:flex-row md:pb-0">
-      <aside className="flex items-center justify-center md:justify-start">
-        <h3 className="mr-2 text-m">
+    <section className="mt-auto mb-2 flex w-full flex-col justify-between gap-2 flex-col-reverse md:flex-row md:mt-8 md:mb-6">
+      <aside className="flex items-center pt-2 md:pt-0">
+        <h3 className="mr-2 text-m md:mb-0 mb-2">
           Built with love by{' '}
           <a
             href={ONCHAINKIT_LINK}
@@ -34,7 +34,7 @@ export default function Footer() {
           </a>
         </h3>
       </aside>
-      <ul className="flex max-w-full flex-wrap justify-center gap-3 md:justify-start md:gap-6">
+      <ul className="flex max-w-full flex-col flex-wrap justify-center gap-3 md:justify-start md:flex-row md:gap-6 mt-4 md:mt-0">
         {docLinks.map(({ href, title }) => (
           <li className="flex" key={href}>
             <a