1485 sujets

Web Mobile et responsive web design

Problème affichage et responsive

Pages :
Bonjour, j'ai deux problèmes :
Sur mon site www.cabinet-focus.fr, sur cette page, au niveau de 'qui suis-je ?" et 'Focus ou pas ?"
* Sur une tablette, le texte apparait quand on touche l'image, mais le texte deborde du rectangle.
Ma question comment faire pour le texte ne déborde pas et qu'il se cale sur tous les ecrans en fonction de leur dimension ?
* Sur un smartphone, le texte n'apparait tout simplement pas. Comment faire pour qu'il apparaisse?

Merci de vos réponses ( simples)
Fanny
Salut,

au niveau du smartphone, je sais pourquoi il ne s'affiche pas.

dans le fichier css de boostrap on retrouve :
@media (max-width: 767px)
.hidden-xs {
    display: none!important;
}


Je sais pas si tu connais les @media mais c'est ce qui permet de faire du responsive.
Dans ton cas, tu dois juste enlever cette ligne display: none!important;

Pour le problème sur tablette c'est un peu plus subtile
Soit tu utilises overflow-y: hidden; sur ta div .reasons-col .on-hover ligne 241 dans styles.css
Soit tu adapte ton texte pour mettre moins de contenu.
Modifié par JENCAL (14 Sep 2016 - 11:01)
au niveau smartphone, j'ai suivi ta modif, j'ai éditer le fichier boostrap.css, et effacer cela ligne , ça donne ça
@media (max-width: 767px) {
.hidden-xs {

}
c'est bon au niveau des accolades ?
J'ai testé, mais ça change rien !

Pour la tablette, j'ai fait ta modif ligne 241. Par contre, je n'avais pas vu, mais si je mets la tablette en format paysage le texte apparait quand on touche l'image, et si on met la tablette en portrait le texte n'apparait pas...
Help Smiley bawling
c'est curieux,

quand je fais comme cela

@media (max-width: 767px)
.hidden-xs {
    /* display: none!important; */
}


personnellement cela fonctionne ... Smiley decu


as-tu bien vidé tes cache etc... ?
Modifié par JENCAL (14 Sep 2016 - 11:56)
oui j'ai vidé le cache , et ca marche pas sur mon smartphone, je suis suis android 5.1.
Et pour la tablette , tu sais pourquoi en paysage ça fonctionne et pas en portrait ?
Fanny
fanny64 a écrit :
et ca marche pas sur mon smartphone, je suis suis android 5.1.
Fanny


Tu veux dire que actuellement, le site en ligne est celui que tu as directement modifier ?
Non c'est dans le bootstrap.min.css j'avais pas fait gaffe Smiley decu fait un ctrl+f car c'est en minify..
Modifié par JENCAL (14 Sep 2016 - 15:32)
En faisant un petit tour sur ton site, je retrouve quelques broutilles d'erreurs.

Tel que les accents qui ne sont pas pris en compte http://www.cabinet-focus.fr/livredor/index.php
ou sur l'accueil du site les petits "En savoir Plus" qui ne sont pas alignés
Mais je pense que tu es déjà au courant de tout cela.
Modifié par JENCAL (14 Sep 2016 - 15:53)
effectivement galère a trouver dans le fichier...tout est sur 2 lignes...j'ai trouvé et modifié et oui cela fonctionne sur smartphone et tablette.
Comment éviter que le trait coupe le texte pour les petits écrans sans enlever du texte ?
Fanny
JENCAL a écrit :
En faisant un petit tour sur ton site, je retrouve quelques broutilles d'erreurs.

Tel que les accents qui ne sont pas pris en compte http://www.cabinet-focus.fr/livredor/index.php
ou sur l'accueil du site les petits "En savoir Plus" qui ne sont pas alignés
Mais je pense que tu es déjà au courant de tout cela.





Au niveau des accents sur le livre d'or, je n'y arrive pas.
Pour les 'en savoir plus' c'est fait exprès, il dépasse normalement du rectangle violet pour faire un petit effet.
fanny64 a écrit :

Au niveau des accents sur le livre d'or, je n'y arrive pas.
Pour les 'en savoir plus' c'est fait exprès, il dépasse normalement du rectangle violet pour faire un petit effet.


à la ligne 227 dans styles.css tu as : 
.reasons-col .reasons-titles {
  position: absolute;
  bottom: 0;
  text-align: center;
  background-color: #AB979E;
  width: 100%;
  color: #000000;
  text-transform: uppercase;
  height: 125px;
  padding: 25px 0;
}


si tu remplace absolute par relative, tu devrais avoir le text avec une bonne hauteur. (en faite cela décale le titre "Qui suis-je" vers le bas.. donc peut être qu'il faudra de nouveau adapter le text pour le remplissage.
j'ai remplacer absolute par relative, mais ça change pas grand chose, la ligne coupe le texte..
ça fonctionne si je met le smartphone en mode paysage.. Après je pense que c'est un détail.

Les accents ??
Bisare moi ça rend bien, regarde

Pour les accents, cela risque d'être un peu plus compliqué.

Soit il faut encodé la table en question en utf8,
Soit il faut encodé directement le fichier en utf8. (avec notepad++ par exemple)
fanny64 a écrit :
au niveau smartphone, j'ai suivi ta modif, j'ai éditer le fichier boostrap.css, et effacer cela ligne , ça donne ça
@media (max-width: 767px) {
.hidden-xs {

}


Oh grand malheur, ne faites pas ça !!!

La classe ".hidden-xs" signifie que l'élément doit être caché lorsque l'écran est de format xs.
C'est tout à fait logique et utile.
Si tu souhaites que ton élément ne disparaisse plus dans ce cas, il faut lui retirer la classe dans le html.

D'une manière générale, on ne touche pas au code d'un framework
Pages :
Sujet clos
Aller à