Forum non responsive ?

[Nounouk 85/04]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis installation header
Lien du forum : http://anaaga.forumactif.com/

Description du problème

Bonjour à tous,
Alors je ne sais pas si c'est parce que cette version de forum n'est pas encore aboutie, mais le forum dont je suis administrateur n'a pas l'air d'être "responsive" !
Exemple sur l'image, navigateur google chrome avec zoom à 110% ! Pour voir l'ensemble correctement (sur mon PC) je dois passer à 125 % de zoom.
D'autres utilisateurs ayant une résolution d'écran inférieure à la mienne, me disent que tout se chevauche ! (sans parler des téléphones et tablettes...là c'est pire encore !)

Alors à quoi est-ce dû ?
La taille image du header serait-elle trop grande ?
Est ce que certains javascript (ou css) peuvent causer ces désagréments ?

D'avance merci !

[The Godfather]

Bonjour @Nounouk 85/04

La version AwesomeBB est parfaitement responsive. Je constate que vous y avez introduit des personnalisations notamment via le CSS + JS. Avez-vous tentez de les désactiver en forçant ceux par défaut du forum pour voir si cela corrige votre problème ?

Si ce n'est pas le cas, merci de nous fournir des captures d'écran du problème + un lien pour accéder à la page concerné pour voir ce qu'on peut faire pour vous aider car votre forum est bien responsive et je l’affiche correctement (hors personnalisations) sur mon navigateur aussi bien mobile que descktop

[Nounouk 85/04]

Bonsoir The Godfather et merci pour votre réponse !
Oui j'ai contrôlé la "responsivité" de mon forum et effectivement pas de chevauchement de texte ... La personne qui m'a informé de ce problème a du faire une mauvaise manip sur son pc !
En revanche , n'y a t'il pas moyen d'adapter automatiquement le header à la résolution d'écran afin de voir ce dernier en son entier, sans avoir à zoomer plus ou moins ?
J'ai essayé de forcer le css par défaut du forum et ça me donne ça (ça fait disparaître l'image de fond):



D'avance Merci !

[Nounouk 85/04]

UP ! Je réitère ma question !
N'y a t'il pas moyen d'adapter automatiquement le header à la résolution d'écran afin de voir ce dernier en son entier, sans avoir à zoomer plus ou moins ? .... et ce dernier doit il avoir une taille particulière pour être "responsive" ?
Merci !

[*Splash*]

Hi,

Pour ton header tu peux essayer ce code à la CSS :

Code:

.header {
 background-image: url("url de l'image");
 margin-left: auto;
 margin-right: auto;
 width: 100%;
 background-position: center;
 background-repeat: no-repeat;
}

[Nounouk 85/04]

Hi,

Pour ton header tu peux essayer ce code à la CSS :

Code:

.header {
 background-image: url("url de l'image");
 margin-left: auto;
 margin-right: auto;
 width: 100%;
 background-position: center;
 background-repeat: no-repeat;
}

Merci Splash, mais cette solution ne fonctionne pas !
Comment faire en sorte que la taille du header s'adapte automatiquement selon la résolution d'écran du visiteur ?
Merci !

[kilinah]

Hello,

Essaie avec:
background-size: cover;

si ça ne fonctionne pas, remplace cover par contain ou 100%

[Nounouk 85/04]

Hello,

Essaie avec:
background-size: cover;

si ça ne fonctionne pas, remplace cover par contain ou 100%

Merci kilinah
J'ai essayé tes solutions qui en fait fonctionnent plus ou moins !
En effet, et bizarrement, après test responsive sur outil en ligne, il apparaît que le header est bien responsive pour tablettes et téléphones, mais à priori pas pour PC car l'affichage du header avec affichage 100% (Google Chrome) est incomplet en hauteur ! (Il manque le bas avec dénomination de l'association) !

Alors peut être une solution: Ma bannière serait elle trop grande ? Elle fait 1200 x 200 px !

Merci !

[kilinah]

Essaie ta bannière en 1520x200px

après le souci est qu'on a tous des écrans de taille différentes et donc le rendu sera probablement différent chez chacun.

Petit conseil: positionne ton texte et/ou tes images au maximum au centre de ton header et laisse un espace "vierge" (le même que sur les côtés par exemple) au-dessus et en-dessous

[Invité]

Bonjour Nounouk Essayez ce code dans le CSS. Vous pouvez augmenter le 400 px si cette valeur n'est pas assez grande.

Code:

#header-banner {
background-image:url(https://url de votre image);
background-size:auto,100%;
background-position:center;
height: 400px!important;
}


[Nounouk 85/04]

Bonsoir
C'est la solution de Surricate qui fonctionne le mieux !
UN GRAND MERCI A TOUS !

Bonne soirée
Sujet résolu !