Mauvais affichage d'un écran à un autre

Bonjour,

C'est tout à fait normal déjà ne t'inquiète pas, fais le test change la taille de ton navigateur tu verras des changements. Pour régler ton problème tu vas devoir utiliser du responsive, la manière de rendre un site accessible sur n'importe quelle taille d'écran.

Pour simplifier les choses tu peux utiliser les media queries qui te permettent de définir un style CSS en fonction d'une taille d'écran défini.
Tu peux également utiliser les flexbox pour simplifier l'organisation des blocs, ou sinon il y a aussi les grid qui font le même travail.

La différence entre les flexbox et les grid je dirais c'est que pour les grid il y a plus de choses à aprendre mais elle t'offre des possiblité bien plus complète que ce qu'offre les flexbox (même si elles font déjà du bon boulot).
Du côté des flexbox, il y a moins de choses à apprendre mais ça offre une manière simplifier d'organisation de ta page, mais ça rempli parfaitement pour un site basique, tu risques de t'arracher les cheveux (et encore...) pour un design plus complexe, ce n'est pas impossible c'est juste un peu plus de boulot.

Voici quelques liens qui pourrait t'être utile :

• Une explication détaillé sur les flexbox
• Le MDN sur les flexbox
• Le MDN sur les grid
• Le MDN sur les mediaqueries
• Un tuto d'Openclassroom sur les media queries
• Une manière ludique d'apprendre les flexbox avec un petit jeu en ligne.
• La même chose qu'au dessus mais pour les grid
• Bonus : Un site qui regroupe différent site qui fonctionne avec les media queries pour te montrer le potentiel du truc.

Merci beaucoup, j'ai trouver la soulution, il faillait que je mette les background-size: cover;

J'ai besoin d'un conseil : Pour le mobile first, on m'a pas donné la maquette de la version mobile du site mais uniquement la version desktop. Dois-je moi-même improviser une mise en page mobile ?

Si on ne t'as pas donné de maquette, je peux te conseiller plusieurs choses, demande ce qui selon les gens qui te demande de coder ce site devrait être affiché (les choses importantes), comme ça tu pourras plus facilement masquer certains choses (par exemple certaines informations qu'on affiche mais qui ne sont pas nécessaire au bon fonctionnement du site etc..)

Sur mobile il est plus intéressant d'avoir un menu qui s'ouvre par le côté, (un menu "hamburger") rien de bien compliquer mais ça rend la navigation bien plus simple.

Une dernière choses, pour que ton site ait un bon rendu sur mobile tu dois mettre ceci dans ton head : <meta name="viewport" content="initial-scale=1, maximum-scale=1">, je te laisse tester :D

Si tu as d'autres questions n'hésite pas.

Merci ! " Tu dois mettre ceci dans ton code ..." tu n'as pas fini ta phrase. Je suppose que c'est ceci : <meta name="viewport" content="width=device-width, initial-scale=1.0">

Oui c'est bien ça ^^ my bad ^^