Merge branch 'main' of gitlab.cs.hs-rm.de:dross001/learniverse

components/ModuleCardSlider/ModuleCard/ModuleCard.Module.css

@@ -25,7 +25,7 @@
 }
 
 .infoText p {
-  max-width: 100%;
+  /* max-width: 100%; */
   margin: 0;
   word-break: break-word;
   white-space: normal;
@@ -133,10 +133,44 @@
   }
 }
 
-@media (max-width: 430px) {
+@media (max-width: 768px) {
   .textCard {
-    width: 18rem;
+    width: 28.75rem;
+    height: auto;
+    flex-shrink: 0;
+    border-radius: 0.9375rem;
+    padding: 1.875rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1.875rem;
+  }
+
+  .info {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .infoText {
+    width: 22.5rem;
+    max-width: 22rem;
+    min-height: 7em;
+  }
+
+  .arrow {
+    width: auto;
     height: auto;
+  }
+}
+
+@media (max-width: 430px) {
+  .textCard {
+    width: 19.375rem;
+    height: 13.875rem;
     flex-shrink: 0;
     border-radius: 0.9375rem;
     padding: 1.25rem;
@@ -152,13 +186,19 @@
     justify-content: space-between;
     align-items: flex-start;
     width: 100%;
+    max-height: 8rem;
     flex-wrap: wrap;
     gap: 1.5rem;
   }
 
   .infoText {
     max-width: 400px;
-    min-height: 3.5rem;
+    max-height: 3.5rem;
+  }
+
+  .infoText p{
+    max-width: 400px;
+    height: 3.5rem;
   }
 
   .arrow {

components/ModuleCardSlider/ModuleCard/ModuleCard.tsx

@@ -11,7 +11,6 @@ interface TModuleCardProps {
   color: string;
 }
 
-// const ModuleCard: React.FC<TModuleCardProps> = ({ name, text, lv, color }) => {
 function ModuleCard({ name, text, lv, color }: TModuleCardProps) {
   const { theme } = useThemeContext();
   const chapterContext = useChapterContext();

components/ModuleCardSlider/ModuleCardsContainer.module.css

@@ -32,13 +32,63 @@
   color: var(--text-secondary-dm);
 }
 
+@media (max-width: 1200px) {
+  .infoText p {
+    max-width: 100%;
+    margin-right: 0px;
+  }
+
+  .module {
+    display: flex;
+    flex-direction: column;
+    gap: 80px;
+    padding: 0;
+  }
+  
+  .infoText {
+    display: flex;
+    justify-content: space-between;
+    padding-left: 5vw;
+    padding-right: 5vw;
+  }
+}
+
+@media (max-width: 768px) {
+  .infoText p {
+    max-width: 100%;
+    margin-right: 0px;
+  }
+
+  .module {
+    display: flex;
+    flex-direction: column;
+    gap: 80px;
+    padding: 0;
+  }
+
+  .infoText {
+    display: flex;
+    justify-content: space-between;
+    padding-left: 5vw;
+    padding-right: 5vw;
+  }
+}
+
 @media (max-width: 430px) {
   .infoText p {
     max-width: 100%;
     margin-right: 0px;
   }
+
   .infoText {
     flex-direction: column;
     gap: 20px;
   }
+
+  .module {
+    display: flex;
+    flex-direction: column;
+    gap: 80px;
+    padding: 0;
+  }
 }
\ No newline at end of file

components/ModuleCardSlider/ModuleCardsSlider.Module.css

 .slider {
   display: inline-flex;
   gap:0.9375em; 
-  margin-left: 5vw;
+  /* margin-left: 5vw; */
   overflow-x: scroll;
   white-space: nowrap;
 }
\ No newline at end of file

components/ModuleDetail/ModuleDetail_Module.module.css

@@ -172,6 +172,6 @@
   }
 
   .headlineAndSlider {
-    gap: 1.25rem;
+    gap: 1.25em;
   }
 }