fix modal width

C2DH · Jan 19, 2024 · 9bce311 · 9bce311
1 parent 1fa6683
commit 9bce311
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/components/Hero/ui/ModalCreateNew.jsx b/src/components/Hero/ui/ModalCreateNew.jsx
@@ -131,7 +131,7 @@ export const ModalCreate = ({ withCarousel = false }) => {
           <div className="hero__modal__carousel">
             <StoryItem story={currentStory} reduced />
           </div>
-          <div className="Form w-100 mt-3" style={{ textAlign: 'start', maxWidth: 500 }}>
+          <div className="Form w-100 mt-3" style={{ textAlign: 'start' }}>
             {withCarousel ? (
               <div className="hero__modal__carousel mx-3 ">
                 <ModalCarousel options={[0, 1, 2, 3, 4]} setOption={setSelectedColor}>

diff --git a/src/components/Hero/ui/styles/modal.css b/src/components/Hero/ui/styles/modal.css
@@ -1,9 +1,6 @@
 .hero__modal {
   position: absolute;
   bottom: 5.5rem;
-  width: 50%;
-  left: 25%;
-
   background: var(--linen-500, #fcede2);
   border-radius: 1rem;
   padding: 1rem;
@@ -18,6 +15,14 @@
   z-index: 120;
 }
 
+@media (min-width: 992px) {
+  .hero__modal {
+    width: 600px;
+    left: 50%;
+    margin-left: -300px;
+  }
+}
+
 .hero__modal p {
   padding: 0;
   line-height: 1rem;