Bonjour.

Je viens de tester sur: https://www.google.com/webmasters/tools/mobile-friendly/ le site web: https://www.vindebacchus.com et je trouve qu'il est parfaitement adapter au mobile donc respecte la technologie responsive.

J'aimerai si quelqu'un d'autre a essayer la méthode c-dessous ou que si quelqu'un a plus à me dire sur la technique.

Technique utilisée:

Je vous donne la procédure pour 1 page. A la fin de cette procédure vous aurez tout compris pour faire toutes les pages de votre site.

Vous avez besoin de modifier 3 fichiers et pas plus et... beaucoup de patience.

1 - Copiez collez les fichiers "Template.CSS" (qui contient les élèments permanents de votre page comme le menu.) "index.CSS" (qui contient les élèments propres à la page) et index.html, dans un dossier à part.

2- Pour index.html

Remplacez votre meta name="viewport" par:

<meta name="viewport" content="width=device-width, initial-scale=1/" />

Puis à tous les WIDTH supérieur à 320px placer des /* et des */ ce qui donne

/* width:1244*/

Sauvegardez et transférez votre index.html sur votre serveur, c'est terminé pour ce fichier.

3 - Allez sur la page d'accueil de votre site via Google Chrome et faites F12 pour ouvrir l'inspecteur. A gauche dans l'onglet "ELEMENT", vous retrouvez l'HTML de votre page d'accueil. En cliquant sur les lignes, les parties correspondantes de votre site se mettent en surbrillance et dans la partie droite dans l'onglet "STYLE" apparaissent les élèments du CSS à cocher ou à décocher selon la résolution désirée.

Dans l'onglet "SOURCES" vous retrouverez votre fichier Templates.CSS, ajoutez pourchaque dimension souhaitée le code suivant ( Ici exemple en 667px pour l'Iphone 6 et en 320px pour Iphone 5): 

A vous bien sûr de l'adapter selon votre site tout en réduisant la page de votre navigateur pour voir évoluer le résultat.

Commencez par mettre selon les résolutions d'écran désirées (ici 667px et 320px):

@media screen and (max-width:667px){

Puis modifier votre page selon vos besoins les élèments permanents (menu, bandeau, pied de page etc...) en ajoutant ceci: (j'ai mis entre /*  et */ ce à quoi cela correspond).

/* Reglage hauteur Menu */
#imMnMn { height: 80px; width: 300px; margin-left: 20px;}
/* Reglage hauteur du fond haut arriere */
#imHeaderBg {height: 290px; width: 667px;}
/* Hauteur du texte haut */
#imPage {padding-top: 285px; margin: 0px auto 0px auto; width: 667px; position: relative;}
/* Retrait du bandeau */
#imHeader {display: none; }

#imContent {min-height: 380px; position: relative; width: 667px; }
#imContentGraphics {min-height: 380px; position: absolute; top: 180px; bottom: 300px; left: 0; width: 667px; }

#imFooter {height: 300px; width: 667px; }

@media screen and (max-width:320px){

/* Reglage hauteur Menu */
#imMnMn { height: 80px; width: 300px; margin-left: 20px;}
/* Reglage hauteur du fond haut arriere */
#imHeaderBg {height: 290px; width: 320px;}
/* Hauteur du texte haut */
#imPage {padding-top: 285px; margin: 0px auto 0px auto; width: 320px; position: relative;}
/* Retrait du bandeau */
#imHeader {display: none; }

#imContent {min-height: 380px; position: relative; width: 320px; }
#imContentGraphics {min-height: 380px; position: absolute; top: 180px; bottom: 300px; left: 0; width: 320px; }

#imFooter {height: 300px; width: 320px; }

}

Sauvegardez et transférez votre Template.CSS dans le dossier STYLE sur votre serveur c'est terminé pour ce fichier.

4 - Dans l'onglet "SOURCES" de l'inspecteur Faites de-même pour le index.CSS.

Mettez les codes suivants selon la résolution recherchée.

@media screen and (max-width:320px){

Puis réglez chaque élèment propre à la page tout en réduisant votre navigateur pour voir le résultat. 

/*bandeau image*/
#imCell_724 { display: none; }

}

("none" c'est pour enlever un élèment).

Sauvegardez et transférez votre index.CSS sur votre serveur dans le dossier PCSS et c'est fini. Votre site est RESPONSIVE.

Si vous n'y arrivez pas ou si vous abandonnez (ce que je comprendrais) retransférez votre site de WEBSITE X5 vers votre serveur et vous retrouverez votre site comme avant mais... non RESPONSIVE.