Flexbox

Bonjour,

Je suis en train de bloquer sur un devoir. J'ai voulu faire celui ci avec Flexbox, mais je coince sur une mise en page au moment du basculement du @media.

Sous mon menu j'ai 3 encarts en colonne avec chacun une taille de 32%, chacun avec une photo centré, un titre, un texte et un couleur en background, ça pour une résolution < à 960px.

Quand je passe sous les 960px, ces encart devrait se trouver l'un en dessous de l'autre avec l'image à gauche, le titre en haut à droite de la photo et le texte en ligne sous le titre.

Sauf que je n'arrive pas à le remettre en ligne, je reste coincé sur une disposition en colonnes à coté de l'image.

Si jamais une bonne âme peu m'aider sur le problème ce serait très sympa de sa part.

Le code pour accéder a CodePen, je précise que les images ne sont pas au même format, la c'est les photos avec leurs taille d'origine.

http://codepen.io/Yvon73/pen/5d272fad2c8e3b9a8cd2749e9ac14c70/
Modifié par Raphael (09 Aug 2016 - 12:57)

Hello,

Je pense que le plus simple serait de faire du mobile first (rien par défaut, puis activer flexbox uniquement quand l'écran est assez large), non ? De cette manière les éléments ton automatiquement en colonne au départ.

Je suis très occupé cette semaine mais je peux te donner une piste de travail : http://codepen.io/raphaelgoetter/pen/ZOrBLW (ça devrait être suffisamment documenté pour comprendre le principe).

Bonne chance !

D'accord, ce qui fait que j'ai travaillé à l'envers, en tout cas t'on codpen est ma seconde ressource d'infos, la première étant t'on livre .

Je te remercie pour l'info et je vais tenter de résoudre mon problème, bon courage à toi et je te redirais si tous fonctionne

Tchusssss