adjust mobile styling

coinbase · Aug 8, 2024 · 9fd5ee3 · 9fd5ee3
1 parent 7a23f10
commit 9fd5ee3
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -23,7 +23,7 @@ export default function Page() {
           >
             <OnchainkitSvg />
           </a>
-          <div className="flex gap-3">
+          <div className="flex gap-3 pt-3 md:pt-0">
             <SignupButton />
             {!address && <LoginButton />}
           </div>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -19,7 +19,7 @@ const docLinks = [
 
 export default function Footer() {
   return (
-    <section className="mt-12 mb-6 flex w-full flex-col justify-between gap-2 md:flex-row ">
+    <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">
           Built with love by{' '}
@@ -28,12 +28,13 @@ export default function Footer() {
             target="_blank"
             rel="noreferrer"
             title="OnchainKit"
+            className="font-semibold hover:text-indigo-600"
           >
             OnchainKit
           </a>
         </h3>
       </aside>
-      <ul className="flex max-w-full flex-wrap justify-center gap-6 md:justify-start">
+      <ul className='flex max-w-full flex-wrap justify-center gap-3 md:justify-start md:gap-6'>
         {docLinks.map(({ href, title }) => (
           <li className="flex" key={href}>
             <a

diff --git a/src/components/TransactionWrapper.tsx b/src/components/TransactionWrapper.tsx
@@ -39,7 +39,7 @@ export default function TransactionWrapper({
         className="w-[450px]"
       >
         <TransactionButton
-          className="mt-0 mr-auto ml-auto w-[450px] text-[white]"
+          className='mt-0 mr-auto ml-auto w-[450px] max-w-full text-[white]'
           text="Collect"
         />
         <TransactionStatus>