missing card caroussel error

src/Components/Carousel/Carousel.css

@@ -8,36 +8,60 @@
 }
 
 .main-img{
-  width: 25rem;
+  width: 100%;
+  max-width: 400px;
+  min-width: 150px;
   height: auto;
-  align-content: center;
   z-index: 1;
+  margin-top: 30px;
 }
 
-.carousel-wrapper {
-  display: grid;
-  grid-template-areas:
-    "main main main"
-    ".  carousel  .";
-  grid-template-rows: 60% 30%;
-  align-content: center;
+@media only screen and (min-width: 1231px) {
+  .carousel-wrapper {
+    position: fixed;
+    display: grid;
+    grid-template-areas:
+      "main main main"
+      ".  carousel  .";
+    grid-template-rows: 60% 30%;
+    align-content: center;
+    justify-content: center;
+    gap: 70px;
+  }
+}
+
+
+@media only screen and (max-width: 1230px) {
+  .carousel-wrapper {
+    display: grid;
+    grid-template-areas:
+      "main main main"
+      ".  carousel  .";
+    grid-template-rows: 60% 30%;
+    align-content: center;
+    justify-content: center;
+    gap: 70px;
+  }
 }
 
+
 .carousel {
+  position:static;
   grid-area: carousel;
-  width: 5rem;
-  margin-top: 110%;
-  display: flex;
+  width:auto;
+  display:inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
+  z-index: 5;
 }
 .carousel-img {
   border: solid 2px #ccc0;
   display: flex;
   transition: all 750ms linear;
-  width: 100%;
-  height: fit-content;
+  width: 20%;
+  max-width: 150px;
+  height: auto;
   object-fit: contain;
   z-index: 4;
 }
@@ -50,16 +74,16 @@
 .prev,
 .next {
   cursor: pointer;
-  width: auto;
-  margin: auto;
-  padding: 16px;
+  max-width: 10px;
+  max-height: 10px;
   font-weight: bold;
+  padding: 10px;
   font-size: 24px;
   transition: 0.6s ease;
   border-radius: 10px;
   user-select: none;
   z-index: 3;
-  margin-bottom: 15%;
+  margin-top: 50%;
 }
 
 /* Position the "next button" to the right */

src/Components/Carousel/Carousel.tsx

@@ -41,6 +41,7 @@ const Carousel: React.FC<CarouselProps> = ({ imgs }) => {
   };
 
   return (
+    <div>
     <div className="carousel-wrapper">
       <div className="curr-img">
         <a className="prev" onClick={() => selectImg(currImg - 1)}>
@@ -56,19 +57,20 @@ const Carousel: React.FC<CarouselProps> = ({ imgs }) => {
         </a>
       </div>
       <div className="carousel">
-        {imgList.map((img: imgObject) => {
-          return (
-            <img
-              src={img.url}
-              className={
-                "carousel-img" + (img.index == currImg ? " current" : " ")
-              }
-              alt={imgList[currImg].title}
-              key={img.index}
-              onClick={() => selectImg(img.index)}
-            ></img>
-          );
-        })}
+    {imgList.map((img: imgObject) => {
+      return (
+        <img
+          src={img.url}
+          className={
+            "carousel-img" + (img.index == currImg ? " current" : " ")
+          }
+          alt={imgList[currImg].title}
+          key={img.index}
+          onClick={() => selectImg(img.index)}
+        ></img>
+      );
+    })}
+  </div>
       </div>
     </div>
   );

src/Components/ProgressBar/ProgressBar.css

@@ -1,6 +1,6 @@
 .progress-bar-vertical {
     flex-direction: column;
-    width: 30px;
+    width: 35px;
     height: 120%;
     border-radius: 15px;
     overflow: hidden;

src/Pages/FormPage/FormPage.css

@@ -2,9 +2,12 @@
   display: grid;
   justify-content: space-between;
   padding: 0 10px;
+  grid-template-columns: '1fr auto';
+  grid-gap: '1rem';
+  align-items: 'start';
 }
 
-@media only screen and (min-width: 850px) {
+@media only screen and (min-width: 1231px) {
   .formPage-container {
     grid-template-areas:
       "pics data progress-bar";
@@ -13,30 +16,26 @@
 }
 
 
-@media only screen and (max-width: 850px) {
+@media only screen and (max-width: 1230px) {
   .formPage-container {
     grid-template-areas:
       "pics"
       "data"
       "progress-bar";
+          grid-template-columns:  90% 10%;
   }
 }
 
-.formPage-container{
-  grid-template-columns: '1fr auto';
-  grid-gap: '1rem';
-  align-items: 'start';
-}
 
 .pic-container {
   grid-area: pics;
+  margin-left: 10%;
 
 }
+.progress-wrapper {
+  grid-area: progress-bar;
+  right: 0;
 
-@media (prefers-color-scheme: dark) {
-  .open-icon {
-    filter: invert(74%) sepia(37%) saturate(0%) hue-rotate(249deg) brightness(101%) contrast(98%);
-  }
 }
 
 /* Text box container styles */
@@ -62,14 +61,14 @@
 
 .data-container label {
   text-align: left;
-  margin-left: 30px;
+  margin-left: 20px;
 }
 
 .textbox-container {
   display: flex; /* Enable flexbox layout */
   justify-content: left; /* Center horizontally within the container */
   align-items: center; /* Center vertically within the container */
-  width: 100%; /* Make the container take up the full width */
+  width: 45vw; /* Make the container take up the full width */
   margin-left: 20px;
   flex-direction: row;
 }
@@ -83,7 +82,7 @@ textarea {
   border: 1px solid #ccc;
   border-radius: 10px;
   box-sizing: border-box;
-  width: 300px;
+  width: 100rem;
   height: auto;
   min-height: 40px;
   max-height: 97px;
@@ -112,9 +111,9 @@ textarea {
 }
 
 .show-more-container{
-  margin-left: 210px;
-  margin-right: -30px;
-  margin-top: -5px;
+  display: flex-end;
+  width: 45vw;
+  align-self: end;
 }
 
 .data-section {

src/Pages/FormPage/FormPage.tsx

@@ -251,6 +251,7 @@ const FormPage = () => {
           {parent.label.charAt(0).toUpperCase() + parent.label.slice(1)}{" "}
           {inputInfo.label.replace(/_/gi, " ")} :
         </label>
+        <div className="div-grid-show-more">
         <div className="textbox-container">
           <textarea
             id={parent.label + "-" + inputInfo.label}
@@ -306,9 +307,7 @@ const FormPage = () => {
                 );
                 modal?.ref.current?.classList.add("active");
               }}
-            >
-              Show more
-            </label>
+            >Show more</label>
             <Modal
               toRef={
                 modals.find(
@@ -335,6 +334,7 @@ const FormPage = () => {
           </div>
         )}
       </div>
+      </div>
     );
   };