Problème avec un font size récalcitrant!

Salut,
Tu a essayer en ciblant directement le 'i' ?

Hello!
J'avais déjà essayé en remplaçant le

<i class="fa fa-bars"></i>

par du texte directement, et le problème était le même... Je suis assez désespéré là!

Sur le lien que tu a passer, dans style.css a la ligne 420 tu à :

.navbar .menu--trigger {font-size: 2rem;}

quand on l’enlève ton icon en rouge est aussi grosse que le '+'.

Au passage tes photos sont impressionnantes o.o

Ahhhh merci beaucoup pour les photos :)
J'ai pas mis les meilleures pour le moment en plus!
Je viens d'essayer ton conseil en supprimant

.navbar .menu--trigger {font-size: 2rem;}

Mais du coup, sur la version "classique" du site, c'est à dire ordinateur c'est toujours OK, mais sur la version iPad, je me retrouve avecune icone "+" toujours OK, mais une icone "barres" toujours petite , et avec le contenu images par dessus!
http://antoine-bernard.com/TEST678/

@itoine essaye de mettre ta valeur en pixel plutot qu'en rem.

Laquelle du coup? La "générale"

.navbar .menu--trigger {
    display: inline;
    float: left;
    left: 3%;
    height: inherit;
    cursor: pointer;
/*  font-size: 1.8rem; */
    font-size: x-large;
    font-weight: 600;
    top: 3%;
    position: fixed;
}

ou celle pour la media query associée?
PS: De mémoire j'ai déjà essayé mais ça ne marchait pas!

@itoine par logique , celle avec la media query qui impacte ta balise i.

Humm bah là j'ai testé sur une autre page, qui affiche la même navbar, qui est dans le même dossier, qui utilise la même stylesheet, et j'ai un truc attroce!

Et la bonne page

Salut,
Si j'ai bien compris tu souhaite que tes icones restent de la bonne taille et de la bonne couleur tout le temps ?

hello!
oui voilà! c'est exactement ce que je veux!
Que ce soit sur ordinateur, ou sur tablette/mobile et dans les deux orientations!

Salut ,
Quand tu fais l'intégration pour ton site tu travailles déjà pour un site pour les écrans PC, donc ton css est pour les grandes résolutions.
Puis tu ne changes, dans les médias queries, que les paramètres qui doivent s'adapter au support.
Exemples: Pour tes icones de navigation tu as modifié le code pour chaque média queries, ce qui est une erreur.
Tu veux que tes icones ne changent pas du support PC au écran de smartphone alors laisse les paramètres de tes icones par défaults.

/* iPhone 6 paysage */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {

    .navbar .menu--trigger {font-size: 6rem; color: red;} <- pourquoi ajouter cette ligne ????
    .menu ul{width: 80%; margin: auto;}
    .menu ul li a{font-size: xx-large;color: yellow;}
}

J'espère avoir été clair.

/* iPhone 6 paysage */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {

    .navbar .menu--triggerinfos { font-size: 2rem; }              <- la valeur par défault est 2rm mais avec tu mets 6rem ?????
    .menuinfos .informations{width: 80%; margin: auto;}
    .menuinfos .informations h1{font-size: 4.5rem;}
    .menuinfos .informations p{font-size: 3rem;line-height: 70px;}
}

Bah justement, de mémoire (j'ai essayé tellement de choses que j'ai un doute maintenant), j'ai rajouté ces média queries parce que ça ne marchait pas de base.

Je teste ça et je te dis dans un moment.

Quand je travail sur un site je travail avec Firebug ou l'outil de dévellopement web, ça te permets de vérifier d'ou viennent les problèmes

Alors j'ai supprimé toutes les média queries sur
.navbar .menu--trigger
Mais j'ai toujours le même problème, à savoir un affichage des icones de navigation à la bonne taille sur la page About.html, et un affichage minuscule des icones sur la page index.php (je parle toujours sur des devices mobile).

Edit: Pour firebug, c'est disponible sur Safari ou Chrome?

Je ne peux pas t'aider plus car on a pas accès aux pages de ton site et vérifier.

Ah bon? Tu veux dire que tu ne peux pas voir le code en entier ou que la page ne marche pas?
http://antoine-bernard.com/TEST901
Nos messages se sont croisés, j'ai rajouté les screenshots pour que tu vois le problème de taille!

Ok ça fonctionne, mais je ne vois pas ou est le problème tes icones sont de la bonne taille dans les différents format: PC à smartphone

Bah sur les deux screenshot de mon ipad que j'ai mis au dessus, les icones sont de tailles totalement différentes.

Concernant les outils web oui il y a firebug sur chrome et safari et firefox. tu as aussi sur chrome cet outil "Responsive Web Design Tester"
qui te permet de vérifier si ton site est compatible sur toute sorte de plateforme.
Ton ipad est ce un rétina ?

D'accord, mais j'ai déjà essayé Responsive Web Design Tester, mais ça affiche bien!
L'ipad est un ipad mini 2 retina oui.

Le soucis est que pour pouvoir vérifier tes dires il faut un Ipad mini

j'ai trouvé ça sur google :
http://stephen.io/mediaqueries/

Oui j'avais vu ça, c'est les média queries que j'utilise déjà!
Mais ce qui est dingue c'est que ça marche sur une page et pas sur l'autre!
Alors que le css est le même.
Mais le problème semble assez général, car sur la page index.php, là où il y a la galerie de photos, même le menu en overlay s'affiche en minuscule! Alors que sur la page About.html, tout est "normal".

sur ton ipad as tu essayé d'ouvrir ton site sur un autre navigateur ? ou utilises tu safari uniquement?

J'ai uniquement Safari, mais l'idée est bonne!
Je regarde de suite!
Après installation de Chrome, le problème est... le même! :(

à mon avis le problème vient de la résolution de l'ipad, ou alors dans tes Média queries sois plus générale, c'est à dire au lieu de déclarer une fourchette dans les résolutions tu ne mets que les max-device-width.

Bah ça peut expliquer le fait qu'une même structure de page, avec la même feuille de style, s'affiche de deux manières différentes tu penses?

normalement non, par contre pourquoi ta page index est en php et le reste en html?
Après si tu précises des fourchettes de résolution cela restreint les possibiltés à l'affichage, par contre si tu laisse uniquement les valeurs max ca laisse plus de liberté.

Oui je suis con les deux devraient être en php. J'ai juste une portiond e code en php, pour mettre en timestamp sur la version de la feuile de style.

<link href="Styles.css?v=<?php echo time(); ?>" rel="stylesheet" type ="text/css">

Donc là tu me conseillerais, au liueu de mettre des fourchettes de résolutions sur les media queries, de mettre uniquement des max-device-width, un peu comme ça?

@media only screen 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2)

oui c'est ça comme cela. j'espère que tu vas y arriver !!!!

Bon bah toujours pareil... La page About.php s'affiche parfaitement, et la page index.php non...
J'en ai profité pour mettre les deux pages en .php et changer le dossier sur le serveur au cas où, mais rien...
http://antoine-bernard.com/TEST234/About.php

Un truc qui peut être intéressant...
J'ai supprimé TOUTES les media queries, et sur l'ipad en paysage, maintenant j'ai ça

http://antoine-bernard.com/NEWTEST/index.php

Il y a bien une histoire de taille "globale" de la page index.php on dirait!

Edit: j'ai fait un truc un peu "bourrin", mais j'ai mis une version avec une media query iPad avec

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2)
{
body{zoom: 400%;}
}

Du coup ma page index est quasi bien, mais la page about.php est... 4 fois trop grande! :D

Bon bah j'ai mis dans le <head> de ma page index.php

<style>

            @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2)
{
body{zoom: 400%;}
}

        </style>

Ca marche pas trop mal mais c'est quand même bien dégueulasse comme méthode...
J'en suis pas très fier.

Bon j'ai repris ma page index.php, en créant une feuille de style que pour cette page (je ferai pareil pour la page about.php après), et en reprenant les media queries de zéro, j'arrive à obtenir ça