corrigindo modal

felipetaua · Sep 23, 2024 · b133e71 · b133e71
1 parent 05d5ba4
commit b133e71
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/ModalEventos.css b/ModalEventos.css
@@ -2,9 +2,11 @@
   --vs-primary: 29 92 255;
 }
 
+.modal 
 
 /*Dialog Styles*/
 dialog {
+
   text-align: center;
   margin: 20px 0 0 20px;
   padding: 1rem 3rem;
@@ -18,6 +20,16 @@ dialog {
   -webkit-animation: fadeIn 1s ease both;
           animation: fadeIn 1s ease both;
 }
+
+@media screen and (min-width:800px) {
+  dialog {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
 dialog::-webkit-backdrop {
   -webkit-animation: fadeIn 1s ease both;
           animation: fadeIn 1s ease both;

diff --git a/index.html b/index.html
@@ -372,20 +372,21 @@ <h1 class="linkTitle">Resource</h1>
     </footer>
 
 <!-- Modal dias da semana seg a sexta -->
-<dialog id="dialogSeg">
-	<h2 class="carouselTitle">Segunda-feira - 14/10/2024</h2>
-	<p class="carouselPara">
-	  <h3> Abertura do evento</h3>
-      Convidados da área da tecnologia farão um bate-papo com alunos esclarecendo dúvidas mostrando como é o mercado, que erros não cometer é importante guardar as perguntas para se fazer!
-	</p>
-	<br>
-	<p class="carouselPara"><b>Local</b>: Auditório do SENAC</p>
-	<p class="carouselPara"><b>Período</b>: Matutino</p>
-		<p class="carouselPara"><b>Horário</b>: Início as 00:00</p>
-
-	<button onclick="window.dialogSeg.close();" aria-label="close" class="x">❌</button>
-</dialog>
-
+<div class="modal"> 
+    <dialog id="dialogSeg">
+        <h2 class="carouselTitle">Segunda-feira - 14/10/2024</h2>
+        <p class="carouselPara">
+        <h3> Abertura do evento</h3>
+        Convidados da área da tecnologia farão um bate-papo com alunos esclarecendo dúvidas mostrando como é o mercado, que erros não cometer é importante guardar as perguntas para se fazer!
+        </p>
+        <br>
+        <p class="carouselPara"><b>Local</b>: Auditório do SENAC</p>
+        <p class="carouselPara"><b>Período</b>: Matutino</p>
+            <p class="carouselPara"><b>Horário</b>: Início as 00:00</p>
+
+        <button onclick="window.dialogSeg.close();" aria-label="close" class="x">❌</button>
+    </dialog>
+</div>
 <dialog id="dialogTer">
 	<h2 class="carouselTitle">Terça-feira - 15/10/2024</h2>
 		<p class="carouselPara">