Discussion :

[owenn]

Bonjour à toutes et à tous,
J'ai bricolé une petite maquette de dashboard et je souhaite faire en sorte que celle ci soit 100% responsive avec les vignettes qui prennent la totalité de l'écran, peu importe l'écran.
Le but est de diffuser sur un téléviseur, donc scroll impossible.
Pourriez vous jeter un petit coup d'oeil au code car je suis bloqué.

Nb.: Le principal est le rendu visuel, je m'en fiche de la qualité du code car c'est juste une démo.

Par avance un grand merci à vouscode.txt

[gabi7756]

Bonjour,
Tu peux regarder display : grid;
Tu affiches ça dans une grille qui s'adapte en contenu , tu peux rajouté des gaps etc ...
Pour les lignes et les colonnes :
https://developer.mozilla.org/en-US/...mplate-columns
https://developer.mozilla.org/en-US/...-template-rows
Cdt

[owenn]

Tout d'abord merci d'avoir pris le temps de répondre. Je suis novice en codage, j'ai ajouté ceci :
grid-template-columns: auto auto;
grid-template-rows: auto;
Mais toutes les vignettes n'entrent pas dans la page, si vous pouvez me guider svp. Voici la partie css mise à jour sinon vous avez l'intégralité de mon code en PJ du premier message. Encore merci

<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

body {
background: #333;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.dashboard {
display: grid;
gap: 10px;
width: 90%;
height: 90vh;
grid-template-columns: auto auto;
grid-template-rows: auto;
}

.card {
background: #f39c12;
padding: 20px;
text-align: center;
font-size: 1.5em;
border-radius: 10px;

}

.values {
display: flex;
justify-content: space-around;
flex-wrap: wrap; /* Ajout pour la responsivité */
}

.value p {
margin: 5px 0;
font-size: 0.8em; /* Réduction de la taille de la police pour la responsivité */
}
.stock-section {
background-color: #333;
padding: 10px;
margin-bottom: 5px;
border-radius: 5px;
}

.ventes-section {
background-color: #333;
padding: 10px;
margin-bottom: 5px;
border-radius: 5px;
}


</style>