Browse Source

fix css on smaller screen

Eva Ho 1 year ago
parent
commit
d1f89778e9
2 changed files with 6 additions and 6 deletions
  1. 1 1
      web/app/download/page.tsx
  2. 5 5
      web/app/page.tsx

+ 1 - 1
web/app/download/page.tsx

@@ -29,7 +29,7 @@ export default async function Download() {
   return (
   return (
     <>
     <>
       <Header />
       <Header />
-      <main className='flex min-h-screen max-w-6xl flex-col p-20 lg:p-32 items-center mx-auto'>
+      <main className='flex min-h-screen max-w-6xl flex-col py-20 px-16 lg:p-32 items-center mx-auto'>
         <img src='/ollama.png' className='w-16 h-auto' />
         <img src='/ollama.png' className='w-16 h-auto' />
         <section className='mt-12 mb-8 text-center'>
         <section className='mt-12 mb-8 text-center'>
           <h2 className='my-2 max-w-md text-3xl tracking-tight'>Downloading...</h2>
           <h2 className='my-2 max-w-md text-3xl tracking-tight'>Downloading...</h2>

+ 5 - 5
web/app/page.tsx

@@ -7,20 +7,20 @@ export default async function Home() {
   return (
   return (
     <>
     <>
       <Header />
       <Header />
-      <main className='flex min-h-screen max-w-6xl flex-col p-20 lg:p-32 items-center mx-auto'>
+      <main className='flex min-h-screen max-w-6xl flex-col py-20 px-16 md:p-32 items-center mx-auto'>
         <img src='/ollama.png' className='w-16 h-auto' />
         <img src='/ollama.png' className='w-16 h-auto' />
         <section className='my-12 text-center'>
         <section className='my-12 text-center'>
           <div className='flex flex-col space-y-2'>
           <div className='flex flex-col space-y-2'>
-            <h2 className='max-w-[18rem] mx-auto my-2 text-3xl tracking-tight'>Portable large language models</h2>
-            <h3 className='max-w-xs mx-auto text-base text-neutral-500'>
+            <h2 className='md:max-w-[18rem] mx-auto my-2 text-3xl tracking-tight'>Portable large language models</h2>
+            <h3 className='md:max-w-xs mx-auto text-base text-neutral-500'>
               Bundle a model’s weights, configuration, prompts, data and more into self-contained packages that run anywhere.
               Bundle a model’s weights, configuration, prompts, data and more into self-contained packages that run anywhere.
             </h3>
             </h3>
           </div>
           </div>
           <div className='mx-auto flex flex-col space-y-4 mt-12'>
           <div className='mx-auto flex flex-col space-y-4 mt-12'>
-            <a href='/download' className='mx-14 bg-black text-white rounded-full px-4 py-2 focus:outline-none cursor-pointer'>
+            <a href='/download' className='md:mx-10 lg:mx-14 bg-black text-white rounded-full px-4 py-2 focus:outline-none cursor-pointer'>
               Download
               Download
             </a>
             </a>
-            <p className='text-neutral-500 text-sm'>
+            <p className='text-neutral-500 text-sm '>
             Available for macOS with Apple Silicon <br />
             Available for macOS with Apple Silicon <br />
             Windows & Linux support coming soon.
             Windows & Linux support coming soon.
             </p>
             </p>