[Résolu] Help : Etrangeté responsive, vue mobile charge min-width 760p

Bonjour,

Sur une page très simple, très basique, dans ma preview mobile, il me charge un contenu de tablette, je comprends vraiment pas ce qu'il se passe.
J'ai testé sur mon téléphone mobile, même chose, pourtant mon code est ultra simple

Si quelqu'un à une idée, je suis preneur, car la je sèche, j'ai testé pleins de trucs, mais j'ai toujours ce soucis majeur...

Voici mon code:

@media screen and (min-width:120px) {
	/*Landing page*/
    .global_landing_page {
        background-color: #fff;
    }

    .header_landing_page {
        background-color: #022545;
    }

    .logo_landing_page {
        padding-top: 58px;
        text-align: center;
    }

    .barre_de_separation_landing_page {
        background-color: #fff;
        height: 40px;
    }

    

    .logo_landing_page img {
        width: 70%;
        height: auto;
    }

    .sous_logo_landing_page {
        padding-top: 14px;
        padding-bottom: 25px;
        color: #04A8A1;
        text-align: center;
        font-size: 1em;
    }

    .bas_landing_page {
        background-color: #022545;
        margin-top: 12px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .bas_landing_page a {
        text-decoration: none;
        color: #fff;
    }

    .cadre_message_landing_page {
        width: 95%;
        margin: auto;
        background-color: #fff;
        padding-top: 23px;
        padding-bottom: 23px;
        padding-left: 10px;
        padding-right: 10px;   
        text-align: center;     
    }

    .premiere_partie_landing_page {
        color: #05A9A2;
        font-family: "Montserrat-semibold";
        font-size: 1.4em;
    }

    .seconde_partie_landing_page {
        font-family: "Montserrat-semibold-italic";
        color: #022545;
        font-size: 1.3em;
    }

    .btn_offre_landing_page {
        background-color: #04A8A1;
        color: #fff;
        width: 95%;
        margin: auto;
        padding: 5px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
        font-family: "Montserrat-semibold";
        font-size: 1.3em;
        text-align: center;
        margin-top: 10px;
    }

    .btn_offre_landing_page:hover {
        background-color: #022545;
    }
}


@media screen and (min-width:760px) {
	/*Landing page*/
    .global_landing_page {
        background-color: #022545;
    }

    .logo_landing_page img {
        width: auto;
        height: auto;
    }

    .sous_logo_landing_page {
        padding-top: 16px;
        padding-bottom: 60px;
    }

    .barre_de_separation_landing_page {
        background-color: #022545;
        height: 0px;
    }

    .cadre_message_landing_page {
    	width: 700px;
    }

}

<div class="global_landing_page">
	<div class="header_landing_page">
		<div class="sous_logo_landing_page">Plateforme de location de matèriel en xxxxxx</div>
	</div>

	<div class="barre_de_separation_landing_page"></div>

	<div class="bas_landing_page">
		<div class="cadre_message_landing_page">
			<div class="premiere_partie_landing_page">Votre plateforme de location de matèriel arrive bientôt ...</div>

			<div class="seconde_partie_landing_page">En attendant, découvrez l'ensemble de notre offre 100% dédiée à l'ophtalmologie sur xxxxx.com</div>

			<a href="xxxxx"><span class="btn_offre_landing_page">Je découvre l'ensemble de l'offre</span></a>
		</div>
	</div>
</div>

Voici le soucis en image

https://ibb.co/1J1Xw0c
Modifié par SteeveC (24 Aug 2021 - 10:22)

Salut !

SteeveC a écrit :
Et bien en fait si, un navigateur sur PC peut être réduit manuellement en largeur jusque 120px

Je peux le réduire en dessous perso duc oup j'ai pas de CSS ?

En fait ce que kerlutinoec tente de te dire c'est que tu peu enlever le @media screen and (min-width:120px) il ne sert a rien ici.

SteeveC a écrit :
Ainsi je m'assure de prendre tout ce qui est en dessous du prochain, 760px

Non tu t'assure de prendre tout ce qui est entre 120 et 760px.

Il vaut mieux construire son code avec une partie normale par defaut sans médiaquaries qui sera valable tout le temps (ce que tu as cherché a faire) et ensuite des mediaqueries pour l'adapter :

.global_landing_page {
    background-color: #fff;
}

@media screen and (min-width:760px) {
    .global_landing_page {
        background-color: #022545;
    }
}

Ici le fond blanc sera valable tout le temps (meme en dessous de 120px) sans se prendre la tete et il changera de couleur au dessus de 760px.

bonne journée !

Mmmm, en effet oui
Merci du conseil, j'ignore pourquoi ma logique est passé en dessous de ce principe