1485 sujets

Web Mobile et responsive web design

[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... Smiley hum

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>
Halalalala, j'ai oublié de préciser initial-scale=1.0


<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">


Voila pourquoi ma diffusion mobil charge de la tablette....
Autant pour moi
Meilleure solution
Et bien en fait si, un navigateur sur PC peut être réduit manuellement en largeur jusque 120px
Ainsi je m'assure de prendre tout ce qui est en dessous du prochain, 760px

Sinon, le mec qui réduit son navigateur en largeur a fond, se retrouve sans css
Modérateur
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 Smiley lol 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
Sujet clos
Aller à