Problème avec une div et un id sans effet et partage du code sur CodePen

Question

Bonjour, le fait de créer une div avec un id ne marche pas, je n'ai aucun impact. Je n'ai pas comment vous envoyer mon code via CodePen.

Louis-Nicolas Leuillet · Accepted Answer

Bonjour ! Votre container a une taille de 1300px : ce qui fait que les éléments à l'intérieur ne se réduiront jamais, car ils font 50% de 1300px sur toutes les tailles.
Vous pouvez utiliser le responsive design (c'est ce que nous voyons dans la formation) pour corriger ce problème :)

Doupo Thino · Answer

https://codepen.io/doupo31/pen/WNygeyZ

Louis-Nicolas Leuillet · Answer

Bonjour.
Je vous remercie pour votre code.
Comme vous le voyez, un id a effectivement un impact : votre id ingredients fonctionne. Dites-moi plus précisément ce que vous n'arrivez pas à effectuer ?

Doupo Thino · Answer

Pardon, je n'ai pas précisé : c'est celui #flexbox qui ne marche pas. Et je ne comprends vraiment pas, de mon côté, j'avais fait l'exercice entier et tapé exactement la même chose que vous, mais ça ne marche pas.

Doupo Thino · Answer

Je viens de comprendre que ça ne marchais pas car j'avais mis ma " div id="flexbox" " avant ma" div class="container" ".
Pourquoi cela ne marche pas dans ce sens ?

Doupo Thino · Answer

Pareil sur cet exercice : pourquoi, si j'initialise flexbox sur le body , cela ne fonctionne pas ?

Louis-Nicolas Leuillet · Answer

Cela ne fonctionne pas car Flexbox définit ce qu'on appelle un container . Chaque élément en-dessous de flexbox aura des dimensions qui seront définies par Flexbox.
Je vous invite à regarder cette page si vous voulez bien comprendre : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Doupo Thino · Answer

Merci beaucoup

Doupo Thino · Answer

Bonjour pourriez vous m'aider après la fin de cette formation j'essaye de m'entrainer en créant des sites, mais j'ai un probleme pour mon header j'utilise une image en background et lorsque je réduit ma page elle reduit mais mon logo (qui est une image aussi) ainsi que mon texte ne réduisent pas .Je vous donne mon code malheureusement le logo et le background ne s'affiche pas puisque ce sont des images sur mon ordinateur
https://codepen.io/doupo31/pen/WNygeyZ
Merci d'avance

Doupo Thino · Answer

Je me suis rendu compte que c'est ma classe container qui empeche les éléments de ce réduite mais je ne comprends pas pourquoi

Doupo Thino · Answer

D'accord, merci. Mais quand nous avons fait le portfolio, nous avions mis le container à 1100px et il me semble que l'image et le texte se réduisaient tout de même avant que l'on fasse les media queries . Merci.

Louis-Nicolas Leuillet · Answer

N'hésitez pas à me dire le passage qui correspond à ce point (je ne le retrouve pas) : je vous expliquerai tout :)

Doupo Thino · Answer

Non en fait vous avez raison autant pour moi en regardant de plus près mon code (du portfolio)je me rends compte que nous avons reduis la taille du container dans les media queries.En fait sur mon projet j'ai un problème car j'ai redimensionner mon logo en pixel et non en poucentage, ou peut etre il faut que je le redimensionne en pixel dans mes média queries.
Je reviens vers vous dès que je retourne travailler sur ce projet.
Je me suis actuellement lancé dans la formation au JS (peut être devrais je me faire correctement la main avec html et css d'abord mais je voulez voir si Js ne pouvez pas m'apporter quelque chose de plus (ex:pouvoir faire des bandeau qui défiles etc).
Encore merci des retours rapides a mes questions .

Problème avec une div et un id sans effet et partage du code sur CodePen

Formation Apprendre HTML (legacy)