Bonjour,

je bloque totalement, j'ai faits un petit menu en html/css l'affichage est plutôt propre sur ordinateur et sur iOS mais sur Android le prix s'affiche en tout petit et décalé je ne comprends vraiment pas pour quoi ?

merci d'avance 

        <div id="bloc_page">
		<h1>Snacking.</h1>
		<h3>Tartinables "Superproducteur" 85g<span id="prix">6 €</span></h3>
		<p>Rillettes de poulet français</p>
		<p>Rillettes de maquereaux moutarde</p>
		<p>Crème fine BIO de pois chiches au citron et cumin</p>
		</br>
		<h3>Chips « Pipers » 40g<span id="prix">2 €</span></h3>
		<p>Sea sait / Sweet chili / Cider vinegar sea sait</p>
		</br>
        </div>

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}



body
{
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: black;
}
#bloc_page
{
	   width: auto;
		margin: auto;
		-moz-box-shadow:0px 0px 2px #000;
		-webkit-box-shadow:0px 0px 2px #000;
		box-shadow:0px 0px 2px #000;
		-moz-border-radius-bottomleft: 50px;
		-moz-border-radius-topright: 50px;
		border-radius: 15px;
		border: 5px solid #FFFFFF;
		border-color : orange;
		box-shadow: 0 15px 150px -50px #000000;
		padding:10px;
		
}

#prix{
float: right;
margin-right:10%;
font: 18px;


}


p{
margin-bottom: -10px;	
}

h3{
margin-bottom: -10px;	
	
}

Affichage ordinateur et IOS :

Affichage Android: 

Bonsoir, passer votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

un identifiant est unique dans le document, vous ne pouvez avoir plusieurs id="prix".

La balise </br> n'existe pas, c'est soit <br> soit <br />. Un <br> est un retour ligne, il ce place dans une portion de texte et ne sert aucunement à créer des espacements entre les éléments, pour ce faire il existe margin et padding en CSS.

En CSS, il n'est plus utile de préfixe les propriétés que vous indiquer => https://caniuse.com/border-radius et https://caniuse.com/css-boxshadow

La L32 écrase et remplace la ligne 26.

Pour votre problème tester la propriété font-size plutôt que le raccourci font

Merci AbcAbc6 j'ai pu faire un coup de propre dans mon code et merci AlainPré pour la solution

Bonjour, de rien

Sujet résolu