Fixed carousel not being responsive in small screen issue

zacharyLYH · Dec 13, 2023 · 4f3f953 · 4f3f953
1 parent 058b884
commit 4f3f953
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/components/landing/thanks.tsx b/components/landing/thanks.tsx
@@ -72,7 +72,7 @@ const ThanksPage = async () => {
     return (
         <div className='flex items-center justify-center lg:m-6'>
             <div className='flex flex-shrink-0 flex-col gap-4 md:flex-row'>
-                <div className='w-full max-w-md rounded-lg border border-gray-200 bg-white p-4 shadow dark:border-gray-700 dark:bg-gray-800 sm:p-8 md:w-1/2'>
+                <div className='w-full rounded-lg border border-gray-200 bg-white p-4 shadow dark:border-gray-700 dark:bg-gray-800 sm:p-8 md:w-1/2'>
                     <div className='mb-4 flex items-center justify-between'>
                         <h5 className='text-xl font-bold leading-none text-gray-900 dark:text-white'>
                             Our noble contributors
@@ -133,7 +133,7 @@ const ThanksPage = async () => {
                         </ul>
                     </div>
                 </div>
-                <div className='w-full max-w-md rounded-lg border border-gray-200 bg-white p-4 shadow dark:border-gray-700 dark:bg-gray-800 sm:p-8 md:w-1/2'>
+                <div className='w-full rounded-lg border border-gray-200 bg-white p-4 shadow dark:border-gray-700 dark:bg-gray-800 sm:p-8 md:w-1/2'>
                     <div className='mb-4 flex items-center justify-between'>
                         <h5 className='text-xl font-bold leading-none text-gray-900 dark:text-white'>
                             Tech that made this possible! ({techs.size})

diff --git a/components/ui/component-carousel.tsx b/components/ui/component-carousel.tsx
@@ -49,10 +49,12 @@ const ComponentCarousel: React.FC<ComponentCarouselProps> = ({
 
     return (
         <div className='flex min-h-[60vh] flex-col items-center justify-center rounded-lg p-6 shadow-lg lg:m-6'>
-            <p className='mb-4 text-2xl font-semibold italic'>{title}</p>
-            <div className='flex w-2/3 flex-row items-center space-x-4'>
+            <p className='mb-4 text-center text-2xl font-semibold italic'>
+                {title}
+            </p>
+            <div className='flex w-full flex-col items-center justify-center space-x-0 lg:w-2/3 lg:flex-row lg:space-x-4'>
                 <div className='hidden lg:flex'>{leftArrow()}</div>
-                <div className='flex flex-grow flex-col rounded-xl border border-orange-400 p-4'>
+                <div className='flex flex-col items-center justify-center rounded-xl border border-orange-400 p-4'>
                     {nodes[page]}
                     <div className='hidden lg:block'>{pageNumber()}</div>
                 </div>