[Problème] Site n'affiche pas correctement smartphones et tablettes

[zeurbik2016]

Bonsoir à tous j'ai acheté un template JoomlArt que j'utilise. J'ai effectué des modification à ma guise seulement le site ne s'affiche pas correctement sur les smartphones et tablettes. Les pubs Adsense affiche la taille normale du coup elles restent trop grande sur le site et certains modules aussi. Le site est correct sur pc et mac.
Quelqu'un pourrait-il m'aider svp ?

[lesoutier]

Re : Site n'affiche pas correctement smartphones et tablettes

Difficile de t'aider avec aussi peu d'infos. L'idéal serait de pouvoir accéder au site et de connaitre le nom du template. Je suppose qu'il est responsive d'origine (il devrait utiliser le framework T3), mais quel type de modifications as-tu effectué ?

[zeurbik2016]

Re : Site n'affiche pas correctement smartphones et tablettes

Bonjour Lesoutier et merci beaucoup, voici le lien de mon site "www.urbanpress.ci"
J'ai du utiliser loadposition et j'y est ajouté du css pour créer certaines positions et j'ai aussi retoucher le css de certains modules question d'esthétique. Et, il utilise effectivement framework T3

[zeurbik2016]

Re : Site n'affiche pas correctement smartphones et tablettes

Quelqu'un peut-il m'aider svp

[PhilJ]

Re : Site n'affiche pas correctement smartphones et tablettes

Bonjour,


Normalement, avec un template T3, le menu prenant le relai sur petits formats (tablettes, smartphones) se trouve dans un container ayant pour classe navbar-header. Or quand on regarde le code source d'une page de votre site, le container est vide :

<div class="navbar-header">
</div>

Il n'est dès lors pas étonnant que le menu n'apparaisse pas sur petits formats.

=> Avez-vous activé le « Dropdown Menu » nécessaire aux appareils mobiles depuis la configuration du template ? Voyez l'aide en ligne : https://www.joomlart.com/documentati...magz-ii#config, paragraphe « 3.2 Dropdown Menu ».

________________

Ensuite, il y a manifestement des CSS suspectes, comme celle-ci :

<div style="margin-left: 20px; margin-right: 25px; border-top: 4px solid rgb(206, 12, 12); width: 700px; float: left;">

De même, l'annonce adsense a une largeur fixe nettement trop importante :

<ins data-ad-slot="5679108545" data-ad-client="ca-pub-6490778765435477" style="display: inline-block; height: 90px; width: 728px;" class="adsbygoogle"></ins>

Etc.

=> Vous avez du pain sur la planche

[zeurbik2016]

Re : Site n'affiche pas correctement smartphones et tablettes

Merci PhilJ. Je suis donc perdu parce que je ne suis pas un expert en la matière. PFffff Pouvez-vous me guider svp.

[PhilJ]

Re : Site n'affiche pas correctement smartphones et tablettes

Bonjour,

Merci PhilJ. Je suis donc perdu parce que je ne suis pas un expert en la matière. PFffff Pouvez-vous me guider svp.

Le premier point à vérifier est la configuration du template : Extensions > Templates > JA Magz : l'un des deux réglages suivants doit être à 'ENABLE = ON' :
—

1. 'Off-canvas sidebar' (depuis l'onglet 'Add-ons').
2. ou bien 'Collapse navigation for small screens'.

Attention :
—

• N'activez que l'une des deux fonctionnalités.
• Si vous choisissez le menu de type 'Offcanvas' (le 1^er ci-dessus), vous devez aussi créer et publier un module de type Menu que vous assignerez à toutes les pages du site, et que vous mettrez en position 'Off-canvas'.

Amicalement,

[zeurbik2016]

Re : Site n'affiche pas correctement smartphones et tablettes

Bonsoir PHilJ Merci beaucoup
je viens de choisir la 2eme proposition Collapse navigation for small screens
Ensuite...

Amicalement

[PhilJ]

Re : Site n'affiche pas correctement smartphones et tablettes

...Ensuite, 2^e étape, il vous faudrait rendre le menu mobile lisible, ce qui n'est pas du tout le cas car les labels des liens de menu sont blancs sur fond blanc.

Pour cela, vous avez besoin de la feuille de style complémentaire /templates/ja-template/css/custom.css.

Si ce fichier n'existe pas, vous devez le créer — à l'aide d'un éditeur de textes simple (surtout pas à l'aide d'un traitement de textes).

Dans ce fichier, saisissez les règles CSS suivantes, puis (r)envoyez par FTP le fichier dans le dossier /templates/ja-template/css/ :
—

.t3-mainnav .t3-navbar-collapse .navbar-nav > li > a {

color: #000;

}

.t3-mainnav .t3-navbar-collapse .navbar-nav > li > a:hover {

color: red;

}

...A suivre

[zeurbik2016]

Re : Site n'affiche pas correctement smartphones et tablettes

Bonjour PhilJ
effectivement le fichier custom.css existe j'ai donc ajouté les de lignes de règles CSS que vous venez de me donner.
Merci encore.
...A suivre

[PhilJ]

Re : Site n'affiche pas correctement smartphones et tablettes

Bonjour,

effectivement le fichier custom.css existe j'ai donc ajouté les de lignes de règles CSS que vous venez de me donner.

Parfait, et le menu principal est maintenant utilisable sur mobiles.

Maintenant vous avez encore d'autres soucis, notamment avec vos annonces Google AdSense. Chez moi elles ne s'affichent pas du tout avec Firefox. Elles s'affichent par contre avec Chrome, mais ne semblent pas responsive. => Peut-être vous faudrait-il vous informer auprès de Google concernant ce point : https://support.google.com/adsense/answer/3213689?hl=fr.

[zeurbik2016]

Re : Site n'affiche pas correctement smartphones et tablettes

Ok je le fais et je vous reviens. Merci et à tout de suite

[zeurbik2016]

Re : Site n'affiche pas correctement smartphones et tablettes

Bonjour PhilJ,
Merci beaucoup pour ton aide. J'ai envoie plusieurs requêtes rien cherché aussi sur d'autres forum rien.
Dites moi ya t-il pas moyen de supprimer l'affichage actuel et faire en sorte que le site s'affiche tel quel
mais en version réduite sur smartphone, l'ancienne version du site n'avais pas de version mobile donc le site s'affichait
directement en version réduite et ça fonctionnait bien.
Cordialement

[PhilJ]

Re : Site n'affiche pas correctement smartphones et tablettes

Bonjour,

[...] y a t-il pas moyen de supprimer l'affichage actuel et faire en sorte que le site s'affiche tel quel
mais en version réduite sur smartphone, l'ancienne version du site n'avais pas de version mobile donc le site s'affichait
directement en version réduite et ça fonctionnait bien.

Là, si je peux me permettre, il y a un vrai problème de compréhension : si je vous comprends bien, vous ne voulez pas d'un site compatible avec les appareils mobiles. En effet, si le site doit s'afficher sur les mobiles comme sur les PC (« tel quel » écrivez-vous) mais en tout petit, c'est qu'il n'est pas / c'est qu'il ne doit pas s'adapter en fonction de l'écran, ce qui revient à dire qu'il ne doit pas être compatible avec les mobiles.



Amicalement,

[zeurbik2016]

Re : Site n'affiche pas correctement smartphones et tablettes

En fait l'ancienne version de mon site quand j'allais sur le mobile le site s'afficher pareille que sur l'ordi mais en version réduite sur pur mobile ou tablette si je suis sur une tablette. Je le demande parce que je n'ai pas eu de solution de la par de google.
Sinon je suis ouverte à toute aide.

Merci beaucoup