cartes responsives

master
frperalde 4 years ago
parent e079ab9299
commit 4e44595c7e

@ -46,6 +46,7 @@ a {
body {
background-color: var(--lightprima);
height: 100%;

@ -1,5 +1,6 @@
@media screen and (max-width: 880px) {
.flex-item {
@media screen and (max-width: 990px){
.flex-item {
flex-grow: 1;
background: var(--lightsedonca);
width: 14vw;
@ -15,15 +16,14 @@
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
}
@media screen and (max-width: 855px) {
.flex-item {
@media screen and (max-width: 880px) {
.flex-item {
flex-grow: 1;
background: var(--lightsedonca);
width: 15vw;
width: 14vw;
border-radius: 0.75vw;
padding-right: 0.15vw;
padding-left: 0.15vw;
@ -38,11 +38,11 @@
}
}
@media screen and (max-width: 680px) {
.flex-item {
@media screen and (max-width: 720px) {
.flex-item {
flex-grow: 1;
background: var(--lightsedonca);
width: 19vw;
width: 17vw;
border-radius: 0.75vw;
padding-right: 0.15vw;
padding-left: 0.15vw;
@ -57,12 +57,11 @@
}
}
@media screen and (max-width: 545px) {
.flex-item {
@media screen and (max-width: 590px) {
.flex-item {
flex-grow: 1;
background: var(--lightsedonca);
width: 23vw;
width: 20vw;
border-radius: 0.75vw;
padding-right: 0.15vw;
padding-left: 0.15vw;
@ -78,18 +77,9 @@
}
@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);
body{
background-color: red;
}
.flex-item {
flex-grow: 1;
background: var(--lightsedonca);
@ -106,4 +96,16 @@
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.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);
}
}

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

Loading…
Cancel
Save