Bonjour/Bonsoir,

Je fais un petit site (http://ekkaia.tk/, mon code est ici → https://codepen.io/Ekkaia/pen/BdZXPz) et j'aurai besoin d'un coup de main . Je souhaiterai adapter les carrés qui composent le corps de mon site aux mobiles. Comme vous le voyez, ils sont en rangés de deux (sauf pour celui du milieu) quand ils s'affichent sur ordinateur. Mais sur mobile, ils apparaissent un par un (ce qui est moche). 

Comment faire pour que mes carrés apparaissent aussi par rangés sur mobile ? J'ai placer des balises <section> pour définir chaque rangée, je pense qu'elles doivent me servir pour définir une rangée comme un élément qu'il ne faut pas couper en deux, mais comment faire ? 

Merci d'avance 

Bonjour,

Tu dois définir les tailles de tes sections à l'intérieur des media queries.

-
Edité par overcride 18 août 2017 à 16:20:02

J'ai essayé des trucs, sans succès. Tu peux me donner quelques indices sur ce qu'il faut que je fasse ?

-
Edité par Anonyme 18 août 2017 à 18:06:06

Bonjour,

tu fixes des largeurs à chacun de tes éléments : forcément il arrive un moment où 1rem + 300px + 1rem + 1rem + 300px + 1rem, ça ne tient plus sur une ligne…

Je ne te conseille pas de garder tes carrés par deux sur mobile : imagine-toi un écran de 320px de large, avec deux carrés, ça fait pas bien gros…

Je conseille, sur petit écran, de ne plus fixer lesdites largeurs, de laisser tranquillou les blocs prendre leur largeur maximale (en leur mettant un display: block bien sûr).

Je pense d'ailleurs que tu gagnerais à mettre tout ce petit monde dans un seul bloc avec display: flex; flex-wrap: wrap; plutôt que une section par ligne et des inline-block un peu bancals.

D'accord, je trouve que c'est effectivement mieux. Du coup avec les medias queries je met un "display:block" sur "main" directement ? Et je remplace pour tout mes carrés le "display:inline-block" par "display: flex; flex-wrap: wrap;" ? Ce n'est pas une bonne chose de mettre une largeur sur chacun des carrés ? 

-
Edité par Anonyme 18 août 2017 à 21:57:21

Pour la version petit écran (dans une media query, en effet), je mettrais simplement width: auto sur tes carrés.

Fixer une largeur n'est pas forcément une mauvaise idée : si le périphérique final est suffisant grand, ça passe très bien. Sur petits écrans (ou sur très grands, faut tester)… ben, moins. Teste en diminuant fortement la largeur de ta fenêtre.

Sinon, je peux essayer avec des pourcentages plutôt que des pixels ?

Je résume tes conseils (tu me dis si je me trompe) :

• Sur mobile, n'avoir qu'un carré par ligne.
• Avec une media query, ne pas fixer les largeurs, mettre un "display: block" et un "width: auto".
  Mais du coup je le fais sur les cartes à proprement parler, c'est-à-dire ".card", ".card-large", etc ? ou directement sur "main" qui les contient ?
• Mettre tout mes carrés dans un même bloc (avec "div" ou directement avec "main" ?) et lui attribuer "display: flex; flex-wrap: wrap;".
• Supprimer les "sections" et les "display: inline-block;".

-
Edité par Anonyme 18 août 2017 à 22:16:17

Aussi : mais attention, si tu fais du flexible pur, pense à bien mettre des limites. (et aussi que 1rem + 50% + 1rem + 1rem + 50% + 1rem, c'est plus grand que 100% ! si tu veux jouer avec ça, inspire-toi de la grille de Bootstrap v4, elle est bien fichue)

D'accord, je vais voir ça... j'ai trouvé quelques exemples de "responsive squares" qui pourrait me servir si je met les largeurs en pourcentage. J'ai quelques questions par rapport à tes conseils, elles sont dans le résumé que j'ai fais plus haut 

J'avais pas vu ton edit, pardon.

Alors : le non-fixage des largeurs, ben c'est sur tes cartes, pas le conteneur, puisque c'est là que tu as mis des largeurs

J'ai fais ce que tu m'as dis mais bon, ce n'est pas vraiment ce à quoi je m'attendais :/

https://codepen.io/Ekkaia/pen/wqyjNR

-
Edité par Anonyme 18 août 2017 à 23:18:14

Ben faut donner une largeur maximale à ta section globale (environ 680px, mais il faudra calculer plus précisément, et/ou mettre des marges en pixels et non en em ou en rem), et la centrer avec margin: 0 auto.

J'ai fais ce que tu m'as dis, mais ça n'a pas changer grand-chose :/

Pense à toujours finir tes lignes par des ";", tu en as oublié plusieurs (c'est pour ça notamment que ton contenu ne se centre pas).

Ensuite, la largeur de la carte double ne peut plus être "60%"

J'ai dit 680px au doigt mouillé, c'est à toi de trouver la bonne valeur.

Et enfin, pense à mettre tes media queries après les sections hors media queries, pour ne pas les écraser.

Re-bonjour ! Je souhaite que lorsque l'écran est petit, les carrés s'affichent un par un, en colonne. J'ai un début de résultat avec "flex-direction: column;" dans la media query mais je ne sais pas comment faire pour que le carré large se redimensionne en 300x300px comme les autres. Merci d'avance 

https://codepen.io/Ekkaia/pen/wqyjNR

-
Edité par Anonyme 6 septembre 2017 à 17:47:53

Ben, déjà, de base, tu ne devrais pas lui mettre 100% de largeur, à ton "carré large" Ne lui précise rien ou bien mets width: auto. Ensuite, sur petit écran, je croyais que tu partais sur des "carrés" sans largeur définie ? Mais sinon ben il suffit de lui donner une largeur dans une déclaration de media query, je saisis pas où ça bloque.

Salut,

Et ben tu redimensionnes dans tes media-queries, en prenant en compte le poids du CSS, genre comme ça :

a.card-large {
  width:300px;
  height:300px;
}

Voila voila

Effectivement, c'était tout simple  ça fait un moment que j'ai pas toucher au code de mon site, j'ai du mal à m'y remettre apparemment... Cependant, est-ce que vous savez pourquoi les carrés se collent sur la gauche lorsqu'ils s'affichent sur un petit écran ? Le "margin:auto" de "content" devrait les centrer normalement, non ?