ENH:changes css of tags part

incubyte · Aug 28, 2023 · 521aead · 521aead
1 parent 58f5480
commit 521aead
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 15 deletions.
diff --git a/frontend/src/components/utilities/Carousel.tsx b/frontend/src/components/utilities/Carousel.tsx
@@ -50,7 +50,7 @@ const Carousel = ({
               <div
                 className={
                   courses.length >= 4
-                    ? "buttons"
+                    ? "buttons mlg:hidden block"
                     : courses.length >= 3
                     ? "block buttons lg:hidden"
                     : "block buttons lg:hidden md:hidden"
@@ -75,8 +75,10 @@ const Carousel = ({
                 ref={contentRef}
                 id={contentId}
                 className={
-                  courses.length > 4
-                    ? "carouselListContent justify-start"
+                  courses.length >= 5
+                    ? "carouselListContent mlg:justify-start justify-start"
+                    : courses.length == 4
+                    ? "carouselListContent mlg:justify-center justify-start"
                     : courses.length <= 2
                     ? "carouselListContent justify-start md:justify-center lg:justify-center"
                     : "carouselListContent justify-start lg:justify-center"

diff --git a/frontend/src/css/courses/Filter.css b/frontend/src/css/courses/Filter.css
@@ -1,26 +1,21 @@
 .filterTagsContainer {
-  @apply mx-5 md:mx-10 p-5 text-center flex flex-col w-auto tracking-[.08px];
+  @apply p-5 text-center flex flex-col w-auto tracking-[.08px];
 }
-
 .filterTagsHeading {
-  @apply text-center py-4 lg:py-6 text-3xl font-bold tracking-[.08px];
+  @apply text-center text-3xl mb-5 font-bold tracking-[.08px];
 }
-
 .filterTagsList {
-  @apply grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 mt-5 place-items-center w-full;
+  @apply flex flex-row flex-wrap justify-center gap-x-3 gap-y-2 w-full;
 }
-
 .filterTagsSelected {
-  @apply lowercase rounded-full inline-block text-[#fff] bg-[#343a40] px-[0.20em] pb-[0.25em] pt-[0.35em] text-center text-xs md:text-sm font-semibold leading-none my-1 md:my-0 md:mr-2 md:mt-3 w-[120px] tracking-[.08px] border-2 border-collapse border-[#343a40];
+  @apply lowercase rounded-full inline-block text-[#fff] bg-[#343a40] px-[0.3em] py-[0.2em] w-[130px] text-center text-xs md:text-sm font-semibold leading-none my-1 md:my-0 md:mr-2 md:mt-2 tracking-[.08px] border-2 border-collapse border-[#343a40];
 }
 .filterTags {
-  @apply lowercase rounded-full inline-block bg-[#fff] text-[#343a40] px-[0.20em] pb-[0.25em] pt-[0.35em] text-center text-xs md:text-sm font-semibold leading-none my-1 md:my-0 md:mr-2 md:mt-3 w-[120px] tracking-[.08px] border-2 border-collapse border-[#343a40];
+  @apply lowercase rounded-full inline-block bg-[#fff] text-[#343a40] px-[0.3em] py-[0.2em] w-[130px] text-center text-xs md:text-sm font-semibold leading-none my-1 md:my-0 md:mr-2 md:mt-2 tracking-[.08px] border-2 border-collapse border-[#343a40];
 }
-
 .toggleButton {
-  @apply text-black font-bold text-sm mt-7 tracking-[.08px];
+  @apply text-black text-xs md:text-sm font-semibold mt-2 tracking-[.08px];
 }
-
 .toggleText {
   @apply text-center justify-center tracking-[.08px];
 }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -22,7 +22,8 @@ module.exports = {
         smd: "530px",
         md: "640px",
         mdl: "900px",
-        lg: "1024px",
+        lg: "1154px",
+        mlg: "1180px",
         xl: "1280px",
       },
       keyframes: {