Responsive Design - Update

ApidriuC · Jun 19, 2022 · 311b7e0 · 311b7e0
1 parent 04779ef
commit 311b7e0
Show file tree

Hide file tree

Showing 2 changed files with 281 additions and 15 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1,3 +1,267 @@
+@media screen and (max-width: 1280px) {
+ .textMenu {
+
+ font-size: 65% !important;
+ top: 10% !important;
+ }
+
+ .contentModal {
+ width: 35% !important;
+ left: 33% !important;
+ }
+
+ .sectionContinue {
+ left: 10% !important;
+ width: 80% !important;
+ }
+
+
+ .headerTexto {
+ font-size: 10px !important;
+ top: 10% !important;
+ }
+
+ .headerInicioSesion .icono {
+ width: 25px !important;
+ height: 25px !important;
+ }
+
+ .headerInicioSesion .text {
+ font-size: 12px !important;
+ top: 0 !important;
+ }
+
+ .contentTableDates {
+ height: 85% !important;
+ }
+
+ .modalHeader {
+ height: 25% !important;
+ }
+
+}
+
+@media screen and (max-width: 980px) {
+ .headerTexto {
+ font-size: 8px !important;
+ top: 20% !important;
+ left: 25% !important;
+ }
+
+ .sectionContinue {
+ width: 90% !important;
+ left: 5% !important;
+
+ }
+
+ .contentModal {
+ width: 45% !important;
+ left: 27.5% !important;
+ }
+
+ .contentTableDates {
+
+ width: 50% !important;
+ left: 25% !important;
+ }
+
+ .contentMiddleMiddle {
+ width: 40% !important;
+ left: 37% !important;
+ }
+}
+
+@media screen and (max-width: 800px) {
+ .headerTexto {
+ display: none;
+ }
+
+ .contentModal {
+ width: 50% !important;
+ left: 25% !important;
+ }
+
+ .textMarco {
+ font: normal normal 600 20px/13px Spartan !important;
+ }
+
+ .textFinal {
+ font: normal normal normal 12px/25px Spartan !important;
+ top: 40% !important;
+ }
+
+ .contentMiddleContinue {
+ left: 5% !important;
+ width: 90% !important;
+ }
+
+ .headerInicioSesion .text {
+ display: none;
+ }
+
+ .headerInicioSesion .icono {
+ left: unset !important;
+ right: 25% !important;
+ }
+
+ .headerInicioSesion {
+ width: 7% !important;
+ }
+
+ .headerSoporte {
+ display: none;
+ }
+
+ .headerIcono2 {
+ right: 7% !important;
+ }
+
+ .textMenu {
+ display: none;
+ }
+
+ .headerMenu .headerIcono {
+ width: 35% !important;
+ padding-left: 30% !important;
+ }
+
+ .contentTableDates {
+ width: 80% !important;
+ left: 10% !important;
+ }
+
+ .contentMiddleMiddle {
+ left: 55% !important;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .headerInicioSesion {
+ display: none;
+ }
+
+
+ .contentModal {
+ width: 70% !important;
+ left: 15% !important;
+ }
+
+ .volver {
+ width: 40% !important;
+ margin-left: 25% !important;
+ }
+
+
+ .headerIcono2 {
+ right: 0 !important;
+ }
+
+ .contentContinue {
+ border: 0 !important;
+ border-radius: 0 !important;
+
+ }
+
+ .sectionContinue {
+ top: 23% !important;
+ height: 65% !important;
+ }
+
+ .subtext {
+ font: normal normal normal 12px/21px Spartan !important;
+ }
+
+ .textMarco {
+ font: normal normal 600 20px/30px Spartan !important;
+
+ }
+
+
+ .contentMiddleMiddle .text {
+ display: none;
+ }
+
+ .barra {
+ display: none;
+ }
+
+ .contentMiddleMiddle {
+ top: 20% !important;
+ left: 60% !important;
+ }
+
+ .headerMiddle {
+ height: 20% !important;
+
+ }
+
+ .contentTableDates {
+ top: 25% !important;
+ }
+
+ .contentTableDates {
+ width: 90% !important;
+ left: 5% !important;
+ }
+}
+
+@media screen and (max-width: 530px) {
+
+ .contentMiddleMiddle {
+ display: none;
+ }
+
+ .sectionContinue {
+ top: 15% !important;
+ }
+
+ .headerMenu {
+ display: none;
+ }
+
+ .contentModal {
+ width: 85% !important;
+ left: 8% !important;
+ }
+
+
+ .headerIcono1 {
+ left: 2% !important;
+ }
+
+ .headerMiddle {
+ width: 100% !important;
+ height: 15% !important;
+ top: 0 !important;
+ left: 0 !important;
+ border-radius: 0 !important;
+ border: 0 !important;
+ }
+
+ .headerMiddle .icono {
+ top: 20% !important;
+ left: 25% !important;
+ }
+
+ .contentTableDates {
+ width: 100% !important;
+ left: 0 !important;
+ right: 0 !important;
+ overflow: hidden !important;
+ }
+
+ .table {
+ border: 0 !important;
+ border-radius: 0 !important;
+ }
+
+}
+
+
+
+
+
+
 body {
  margin: 0;
 }
@@ -24,7 +288,7 @@ body {
 .headerMenu {
  top: 0;
  left: 0;
- width: 10%;
+ width: 6%;
  height: 100%;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  opacity: 1;
@@ -33,7 +297,7 @@ body {
 }
 
 .headerMenu .headerIcono {
- width: 15%;
+ width: 20%;
  height: 100%;
  padding-left: 5%;
  padding-right: 5%;
@@ -51,7 +315,7 @@ body {
 
 .textMenu {
  top: 1%;
- left: 3%;
+ left: 2%;
  width: auto;
  position: absolute;
  height: 100%;
@@ -66,7 +330,7 @@ body {
 
 .headerIcono1 {
  top: 0;
- left: 12%;
+ left: 8%;
  width: auto;
  height: 100%;
  position: absolute;
@@ -75,7 +339,7 @@ body {
 
 .headerIcono2 {
  top: 0;
- right: 32%;
+ right: 30%;
  width: auto;
  height: 100%;
  position: absolute;
@@ -85,7 +349,7 @@ body {
 .headerSoporte {
  top: 0;
  cursor: pointer;
- width: 15%;
+ width: 13%;
  right: 15%;
  height: 100%;
  position: absolute;
@@ -94,21 +358,22 @@ body {
 
 .soporte {
 
- width: auto;
- height: auto;
+ width: 20px;
+ height: 20px;
  position: absolute;
  opacity: 1;
  top: 25%;
- left: 5%;
+ left: 0%;
 }
 
 .headerTexto {
  width: auto;
  height: 100%;
+ top: 2%;
  position: absolute;
  font-family: 'Spartan';
  text-align: left;
- left: 23%;
+ left: 18%;
  overflow: hidden;
  color: white;
  font-size: 13px;
@@ -132,8 +397,8 @@ body {
  height: 30px;
  position: absolute;
  opacity: 1;
- top: 5px;
- left: 15px;
+ top: 15%;
+ left: 5%;
 }
 
 .headerInicioSesion .text {
@@ -142,9 +407,9 @@ body {
  position: absolute;
  font-family: 'Spartan';
  text-align: left;
- margin-left: 55px;
+ margin-left: 27%;
  color: white;
- top: 2px;
+ top: 5%;
  font-size: 13px;
 }
 

diff --git a/main.html b/main.html
@@ -8,9 +8,9 @@
  <title>Colpensiones</title>
  <link rel="stylesheet" href="assets/css/main.css">
  <link href='https://fonts.googleapis.com/css?family=Spartan' rel='stylesheet'>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
 
 </head>
-
 <body>
  <section class="paginaCompleta">
  <section class="header">
@@ -240,6 +240,7 @@
  <script src="assets/js/continue.js"></script>
  <script src="assets/js/active.js"></script>
  <script src="assets/js/innerText.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 </body>
 
 </html>