Update ChapterLeft.tsx

- fix responsive
chilleno · Jul 21, 2023 · 0eea878 · 0eea878
1 parent 00c4e4c
commit 0eea878
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/app/components/ChapterLeft/ChapterLeft.tsx b/src/app/components/ChapterLeft/ChapterLeft.tsx
@@ -66,8 +66,8 @@ const ChapterLeft: React.FC<TaskListProps> = ({ id, name, url, haveWord, word, s
         <div className="flex xl:flex-row lg:flex-row md:flex-row sm:flex-col mt-12 max-w-screen w-full" id={'chapter_' + id}>
             <iframe src={url} allowFullScreen className="flex xl:w-1/2 lg:w-1/2 md:w-1/2 sm:w-[320px] h-[310px] xl:ml-0 lg:ml-0 md:ml-0 sm:ml-4 content-center justify-center border-white border-4" />
             <div className="flex xl:w-1/2 lg:w-1/2 md:w-1/2 sm:w-[320px] content-center justify-center">
-                <div className={haveWord ? "flex flex-col w-4/6 max-w-4/6 px-2 py-6" : "flex flex-col w-4/6 max-w-4/6 px-2 py-2 mt-20"}>
-                    <div className={haveWord ? "bubble grow right max-w-full" : "max-w-full bubble grow right xl:max-h-24 lg:max-h-24 md:max-h-24"}>
+                <div className={haveWord ? "flex flex-col w-4/6 max-w-4/6 px-2 py-6" : "flex flex-col w-4/6 max-w-4/6 px-2 py-2"}>
+                    <div className={haveWord ? "bubble grow right min-w-full" : "min-w-full bubble grow right xl:max-h-24 lg:max-h-24 md:max-h-24"}>
                         <div className={haveWord ? "font-outfit text-2xl mt-5" : "font-outfit text-2xl mt-2"}>
                             <b>{name}</b>
                         </div>
@@ -108,7 +108,7 @@ const ChapterLeft: React.FC<TaskListProps> = ({ id, name, url, haveWord, word, s
                         </div>
                     </div>
                 </div>
-                <div className="flex w-2/6 mt-16 xl:ml-1 lg:-ml-1 md:-ml-1">
+                <div className="flex w-2/6 mt-10 ml-8">
                     <img
                         className="xl:h-[198px] lg:h-[198px] md:h-[198px] xl:w-[169px] lg:w-[169px] md:w-[169px] sm:absolute sm:w-[90px] sm:h-[120px] animate-[wiggle_3s_ease-in-out_infinite]"
                         src="/logo/lucho.png" />