cartes responsives

SwichGIT/src/css/base.css

@@ -20,7 +20,6 @@
 	--colorsix : #E6792F;/*HOCTO*/
 
 	/*Tailles cartes*/
-	--tailleTablette : 12vw;
 	--taille: 10vw;
 	/*Les formes*/
 	--u: calc(var(--x) / 2.75);

SwichGIT/src/css/phone.css

@@ -1,6 +1,109 @@
-/*Demi Ecran*/
-@media screen and (max-width: 768px) {
-    body{
-        background-color: green;
+@media screen and (max-width: 880px) {
+	.flex-item {
+        flex-grow: 1;
+        background: var(--lightsedonca);
+        width: 14vw;
+        border-radius: 0.75vw;
+        padding-right: 0.15vw;
+        padding-left: 0.15vw;
+        padding-bottom: 0.25vw;
+        list-style: none;
+        display: flex;
+        margin-right: 0.4vw;
+        margin-left: 0.4vw;
+        margin-bottom: 1vw;
+        -webkit-flex-flow: row wrap;
+        justify-content: space-around;
+    }
+
+
+}
+
+@media screen and (max-width: 855px) {
+	.flex-item {
+        flex-grow: 1;
+        background: var(--lightsedonca);
+        width: 15vw;
+        border-radius: 0.75vw;
+        padding-right: 0.15vw;
+        padding-left: 0.15vw;
+        padding-bottom: 0.25vw;
+        list-style: none;
+        display: flex;
+        margin-right: 0.4vw;
+        margin-left: 0.4vw;
+        margin-bottom: 1vw;
+        -webkit-flex-flow: row wrap;
+        justify-content: space-around;
+    }
+}
+
+@media screen and (max-width: 680px) {
+	.flex-item {
+        flex-grow: 1;
+        background: var(--lightsedonca);
+        width: 19vw;
+        border-radius: 0.75vw;
+        padding-right: 0.15vw;
+        padding-left: 0.15vw;
+        padding-bottom: 0.25vw;
+        list-style: none;
+        display: flex;
+        margin-right: 0.4vw;
+        margin-left: 0.4vw;
+        margin-bottom: 1vw;
+        -webkit-flex-flow: row wrap;
+        justify-content: space-around;
+    }
+}
+
+
+@media screen and (max-width: 545px) {
+	.flex-item {
+        flex-grow: 1;
+        background: var(--lightsedonca);
+        width: 23vw;
+        border-radius: 0.75vw;
+        padding-right: 0.15vw;
+        padding-left: 0.15vw;
+        padding-bottom: 0.25vw;
+        list-style: none;
+        display: flex;
+        margin-right: 0.4vw;
+        margin-left: 0.4vw;
+        margin-bottom: 1vw;
+        -webkit-flex-flow: row wrap;
+        justify-content: space-around;
+    }
+}
+
+@media screen and (max-width: 510px) {
+	.item-form {
+        width: 3vh;
+        padding-left: 0.1vw;
+        margin-top: 0.25vw;
+        height: 3vh;
+        border-radius: 10px;
+        display: table-cell;
+        position: relative;
+        vertical-align: middle;
+        background-color: var(--lighttercia);
+    }
+
+    .flex-item {
+        flex-grow: 1;
+        background: var(--lightsedonca);
+        width: 17vw;
+        border-radius: 0.75vw;
+        padding-right: 0.15vw;
+        padding-left: 0.15vw;
+        padding-bottom: 0.25vw;
+        list-style: none;
+        display: flex;
+        margin-right: 0.4vw;
+        margin-left: 0.4vw;
+        margin-bottom: 1vw;
+        -webkit-flex-flow: row wrap;
+        justify-content: space-around;
     }
 }

SwichGIT/src/index.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="css/pickr.min.css">
     <link rel="stylesheet" href="css/formes.css">
     <link rel="stylesheet" href="css/Resp3.css">
+    <link rel="stylesheet" href="css/phone.css">
 
     <script type="text/javascript" src="js/main.js"></script>
     <script type="text/javascript" src="js/menu.js"></script>

SwichGIT/src/js/main.js

@@ -25,8 +25,8 @@ var offreSWISH = false;
 var lesPoints = 0; //Points du Joueur1
 
 function majSizeCard(column) {
-	var newTailleOrdi = column * 3.2 + 1;
-	var newTailleTablette = newTailleOrdi + 2;
+	var newTailleOrdi = column * 3.3 + 1;
+	var newTailleTablette = newTailleOrdi * 1.2;
 	document.documentElement.style.setProperty('--taille', newTailleOrdi + "vw");
 	document.documentElement.style.setProperty('--tailleTablette', newTailleTablette + "vw");
 }