Bonjour/Bonsoir,

Je fais un petit site (http://ekkaia.tk/, mon code est ici → https://codepen.io/Ekkaia/pen/wqyjNR) et j'aurai besoin d'aide car je souhaite rendre mon site adapté aux différents formats d'écran. Mon problème est que je souhaite que mes "boites de couleur" prennent tout l'espace de la page lorsqu'il s'agit d'un écran mobile. J'ai essayé avec "width" dans les medias queries mais ça ne marche pas 

Merci d'avance 

Bonjour,

l'inspecteur web indique ceci :

@media screen and (max-width: 700px) {
    .card-large {
    width: 46.8%;
  }   
}

ligne 157 de index.css

Du coup les boîtes de couleur prennent 46.8px de large, supprime cette déclaration et les boîtes class="card" prendront toute la largeur disponible

idem pour card-large (ligne 185), card-special-1 (ligne 191) et card-special-2 (ligne 198)

Salut,

Tu as un width de 40% sur .content, donc tes éléments ne peuvent pas faire plus. Mets cette valeur sur auto avec tes media queries.

Pour le reste :

• Laisse tomber les ID, garde ça pour les ancres (ou les liens label/input). Pour ton CSS, utilise des classes.
• De la même façon, donne des classes aux éléments plutôt que de faire des sélecteurs à rallonge avec des noms génériques de balises.
• Width: 100%; c'est au mieux inutile, au pire source de problèmes (même s'ils sont minimisés par ton box-sizing).
• Ton menu latéral n'a pas besoin d'être positionné en "fixed" ; c'est même un problème si jamais le contenu est plus grand que le viewport. Tu peux largement simplifier ça avec flexbox : https://www.emmanuelbeziat.com/blog/colonne-verticale-sur-toute-la-hauteur-de-page#nouvelle-methode-avec-flexbox