Helo popUp responsive

xroom-dashboard/src/components/TutorialShowModal.vue

@@ -41,7 +41,9 @@
                 <img :src="card.icon" alt="icon">
                 </span>
                 <div class="card-body">
+                  <span>
                     {{ card.title }}
+                  </span>
                 </div>
                 <div class="card-footer">
                 مشاهده محتوا
@@ -198,7 +200,6 @@ export default {
   -ms-overflow-style: none;
 }
 
-
 .modal-content::-webkit-scrollbar {
   display: none;
 }
@@ -239,14 +240,10 @@ export default {
   border-radius: 16px;
   width: 100%;
   max-width: 620px;
-    display: block;
   margin: auto;
-}
+  gap: 1rem;
-
-.popUp-object {
   display: flex;
   flex-direction: column;
-    gap: 1.5rem;
 }
 
 .popUp-object h2 {
@@ -294,7 +291,6 @@ export default {
   border: 1px solid #182561;
 }
 
-
 .card-body {
   background-color: #F7F6FA;
   height: 4.5rem;
@@ -304,6 +300,14 @@ export default {
   padding-bottom: 1.2rem;
 }
 
+.card-body span {
+  width: 90%;
+  text-overflow: ellipsis;
+  overflow-x: clip;
+  white-space: nowrap;
+  text-align: center;
+}
+
 .card-footer {
   color: #667387;
   font-size: 14px;
@@ -329,4 +333,149 @@ export default {
   font-size: 16px;
   cursor: pointer;
 }
+
+/* Mobile (max-width: 600px) */
+@media (max-width: 600px) {
+
+  .popUp-body {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+
+
+  .modal-content {
+    max-width: 90%;
+    padding-bottom: 1.5rem;
+    height: 80vh;
+  }
+
+  .popUp-header {
+    padding: 15px 20px;
+  }
+
+  .popUp-header h2 {
+    font-size: 18px;
+  }
+
+  .popUp-object {
+    padding: 15px;
+    max-width: 100%;
+  }
+
+  .popUp-object h2 {
+    font-size: 18px;
+  }
+
+  .cards {
+    gap: 1.5rem 0;
+    justify-content: space-between;
+  }
+
+  .card {
+    width: 48%;
+    height: 9rem;
+  }
+
+  .card-header {
+    height: 2.2rem;
+  }
+
+  .card-logo {
+    top: 10px;
+    right: 33%;
+    padding: 15px 15px 10px 15px;
+  }
+
+  .card-logo img {
+    height: 18px;
+    width: 18px;
+  }
+
+  .card-body {
+    height: 3.3rem;
+    font-size: 14px;
+    padding-bottom: 0.5rem;
+  }
+
+
+  .card-footer {
+    font-size: 12px;
+    height: 2rem;
+  }
+
+  .exit-btn {
+    padding: 12px 30px;
+    font-size: 14px;
+  }
+}
+
+/* Tablet (min-width: 600px - max-width: 1024px) */
+@media (min-width: 600px) and (max-width: 1024px) {
+  .modal-content {
+    max-width: 85%;
+    height: 90vh;
+  }
+
+  .popUp-object {
+    max-width: 90%;
+  }
+
+  .card {
+    width: 31%;
+    height: 10rem;
+  }
+
+  .card-logo {
+    right: 32%;
+  }
+
+  .popUp-header h2 {
+    font-size: 20px;
+  }
+
+  .popUp-object h2 {
+    font-size: 19px;
+  }
+
+  .exit-btn {
+    padding: 14px 40px;
+    font-size: 15px;
+  }
+}
+
+/* Desktop Medium (min-width: 1024px - max-width: 1280px) */
+@media (min-width: 1024px) and (max-width: 1280px) {
+  .modal-content {
+    max-width: 680px;
+  }
+
+  .popUp-object {
+    max-width: 600px;
+  }
+
+  .card {
+    width: 31.5%;
+    height: 10.5rem;
+  }
+
+  .card-logo {
+    right: 34%;
+  }
+}
+
+/* Desktop Large (min-width: 1280px) */
+@media (min-width: 1280px) {
+  .modal-content {
+    max-width: 700px;
+  }
+
+  .popUp-object {
+    max-width: 620px;
+  }
+
+  .card {
+    width: 31.5%;
+    height: 10.5rem;
+  }
+}
 </style>