diff --git a/css/fournisseurs.css b/css/fournisseurs.css index 1e51587..b2c4ca9 100644 --- a/css/fournisseurs.css +++ b/css/fournisseurs.css @@ -4,7 +4,7 @@ .fournisseur img { max-width: 100%; - width: 20%; + width: 250px; margin-bottom: 10px; } diff --git a/css/menu.css b/css/menu.css index 946ba30..65a476b 100644 --- a/css/menu.css +++ b/css/menu.css @@ -41,12 +41,17 @@ color: #1a1a1a; } +.menu-elements { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + .menu-element { - margin-bottom: 25px; - background-color: #f9f9f9; - padding: 20px; - border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; + width: calc(33.33% - 20px); /* 33.33% pour afficher trois éléments par ligne avec une marge de 20px entre eux */ + box-sizing: border-box; + margin-bottom: 20px; } .menu-element img { @@ -55,22 +60,38 @@ height: auto; border-radius: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + margin: 0 auto; } .menu-element h4 { font-size: 22px; color: #333; margin-bottom: 10px; + margin: 0 auto; } .menu-element p { font-size: 16px; line-height: 1.5; + margin: 0 auto; } .prix { font-weight: bold; color: #ff8c00; - font-size: 18px; /* Taille de police plus grande pour une meilleure visibilité */ - margin-top: 8px; /* Espacement du prix par rapport à la description */ + font-size: 18px; + margin-top: 8px; + margin: 0 auto; } + + +@media only screen and (max-width: 767px) { + .menu-elements { + flex-direction: column; /* Afficher les éléments en colonne sur les petits écrans */ + } + + .menu-element { + width: 100%; + } +} +