27398 sujets

CSS et mise en forme, CSS3

[Résolu] Différence d'affichage CSS mobile/ ordi.

30 Dec 2018 à 23:59
Salutations,

Sur ce site : http://mathieu.charreyre.net, depuis les dernières MaJ Android (pas testé sur iOS), mon site carte-de-visite s'affiche bizarrement (décalage des cellules).
Avant Android 9.0, le site s'affichait très bien partout.
Aucun pb sur PC ou Mac.

Auriez-vous une idée ? Le code est très léger et normalement visible sans mal.
Modifié par Casio (31 Dec 2018 - 00:00)
01 Jan 2019 à 15:02
Bonjour Casio,

aucune idée de pourquoi ça se décale. En revanche je vous recommande d'éviter les "width" en pixels et d'utiliser plutôt des pourcentages.

ainsi on a :


.profil-bar {
    max-width: 600px; /* Pour les PC */
    margin: 0px auto auto auto;
}
.web {
    /* width: 300px; (on désactive ou 100%) */
    text-align: center;
}
.contact {
    /*width: 300px; (on désactive ou 100%) */
    font-size: 13px;
    text-align: center;
}
.profil-bar .gauche { /* (pour éviter de doubler) */
    float: left;
    width: 50%;
    /*border-right: 1px solid #EBEBEB; (inutile dans ce cas)*/ 
}
.profil-bar .droite {  /*(pour éviter de doubler) */
    float: right;
    width: 50%;
    /*border-left: 1px solid #EBEBEB; (inutile dans ce cas)*/
}


L'avantage est que l'ensemble s'adapte à la taille de l'écran plutôt que d'être à une taille fixe pas forcément adaptée sur tablette ou PC.

Peut-être que ça résoudra également votre problème ?

Bonne journée et bonne année !
01 Jan 2019 à 15:24
Bonjour, et merci du retour... Smiley cligne

Je viens d'essayer, le site n'est pas déformé, par contre, j'ai été obligé de changer :
max-width: 600px; /* Pour les PC */

en :
max-width: 300px; /* Pour les PC */


Mais toujours le même pb sur mobiles modernes. Smiley bawling

Voici ce que cela donne :
upload/1546352609-22165-screenshot20190101-152107.jpg

Je ne m'explique pas :

.profil-bar .gauche { /* (pour éviter de doubler) */
    float: left;
    width: 50%;
    /*border-right: 1px solid #EBEBEB; (inutile dans ce cas)*/ 
}
.profil-bar .droite {  /*(pour éviter de doubler) */
    float: right;
    width: 50%;
    /*border-left: 1px solid #EBEBEB; (inutile dans ce cas)*/
}


P.s : Bonne année 2019 !
Modifié par Casio (01 Jan 2019 - 15:26)
01 Jan 2019 à 15:49
Casio,

J'avais proposé "600px" car je trouvais votre affichage un peu petit sur PC (j'ai un très grand écran ^^)

Autant pour moi pour les bordures en effet, j'avais fais abstraction de la ligne de séparation Smiley lol

Dans ce cas je recommande :


.profil-bar .gauche {
    float: left;
    width: calc(50% - 1px);
    border-right: 1px solid #EBEBEB;
}
.profil-bar .droite {
    float: right;
    width: calc(50% - 1px);
    border-left: 1px solid #EBEBEB;
}


Pour votre problème d'affichage, c'est une histoire de "line-height" qui doit être mal interprété. En effet quand on change le "line-height" de vos liens à 40px au lieux de 43px, on obtient le même résultat sur PC.

En fixant la hauteur de vos liens à "43px" ça devrait pouvoir régler le problème.


.contact a {
    line-height: 43px;
    height: 43px;
}


En espérant que ça résolve votre souci !
Modifié par besky (01 Jan 2019 - 15:50)
Meilleure solution
01 Jan 2019 à 15:59
TERRIBLE.... Smiley cligne
Cela fonctionne visiblement maintenant sur ces mobiles modernes à la con. Smiley smile

Par contre, je me rends compte d'un décalage vertical des lignes des liens.
Le texte n'est plus complètement au centre (vertical) des cellules (par rapport aux vignettes), mais quelques pixels au dessus. J'ai bien tenté un vertical-align, mais sans succès...

Merci beaucoup de votre aide... Smiley smile
17 Jan 2019 à 14:41
Bien, j'ai trouvé, c'est le line-height du tag A à régler :
(...)
.contact a{ /* Creation du bloc */
	display: block;
    line-height: 41px; /* Position verticale du texte */
    height: 43px; /* Bug line-height */
	background-color: #FFFFFF; /* Fond des cellules */
	/* border-bottom: 1px solid #EBEBEB; */ /*Bordure grise inter-lignes */
}
(...)
Prévenir un modérateur
Répondre au sujet
Aller à