trying give more responsive design2

ValenMorales · Mar 1, 2024 · f7d86e7 · f7d86e7
1 parent 3c3485f
commit f7d86e7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/index.css b/index.css
@@ -218,12 +218,11 @@ main{
   font-size: 1.2em;
 }
 .section .grid {
-  width: 90%;
-  max-width: 100rem;
-  margin: 1em, 0;
+  width: 90vw;
+  margin: 1rem, 0;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  gap: 2em;
+  gap: 2rem;
 }
 
 .section .article {
@@ -269,19 +268,14 @@ article ul {
   margin: 1em 0;
 }
 
-.projects{
-  margin-left: 5rem;
-}
+
 
 .projects .p {
   font-size: 1.3em;
   text-align: center;
   margin: 1em 0;
 }
 
-.about {
-  margin-left: 5rem;
-}
 
 .about .p {
   max-width: 40em;
@@ -344,15 +338,15 @@ svg:hover {
   height: 80%;
   margin: auto;
   position: relative;
-  width: 90%;
+  width: 100vw;
   display: grid;
   place-items: center;
   overflow: hidden;
 }
 
 .my-projects {
   width: 95%;
-  height: 100%;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -446,7 +440,7 @@ margin-bottom: 2rem;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-left: 5rem;
+
 }
 
 .carrousel {
@@ -733,9 +727,13 @@ color:inherit;
 
 /* Responsive css */
 @media only screen and (max-width: 767px) {
+
+  .content-carrousel{
+    perspective: none;
+  }
   .my-projects {
-    width: 100%;
-    margin-left: 5rem; 
+    margin-left: 1rem;
+    width: 100vw;
   }
   main{
     overflow-x:visible;

diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=0.75" />
     <title>my Portfolio</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />