Discussion :

[Benduroy]

Bonjour à tous, sous ce titre étrange se cache un problème assez bête. Je vous explique tout ça.

Le contexte d'abord. J'arrive sur un projet où le site web (une boutique en ligne) existant n'est pas responsive. Ma tache est simple, adapter le visuel aux tablettes et smartphones.

Je crois que tous les tutoriels Responsive Design le disent: il faut commencer petit et aller au fur et à mesure vers des devices aux écrans plus grands. Oui mais là du coup je n'ai pas trop le choix. Ce que j'ai commencé à faire (et c'est peut être là que la technique n'est pas bonne dès le départ) c'est cacher la plupart des div du site lorsque l'on est sur un écran Desktop.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
/* TABLETTE */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
 
	aside,
	#entete, #fond_entete, #fond_entete2, #recherche, #ariane, #colonnegauche, #caroussel, #col_droite_accueil, 
	#fond_pied, #pied, #titre_edito, #edito, #lire_edito, #page, #menu_id, #page_fond_panier, #page_bas_panier, #page-ruler-mask , #fb-root {
		display: none;
	}
}

Puis j'ai ajouté un simple div dans une page html appelée partout avec le texte "TEST"
Et voilà ce que ça donne sur un écran d'iPad

On peut "scroller" avec le doigt vers la droite, c'est moche, c'est pourri, bref ce n'est pas ce que je veux.

Suite à ça j'ai voulu "forcer" mon body à 100 px par exemple... même résultat.
Je ne comprend pas ce qui cloche du coup.

[Benduroy]

Je viens de voir qu'il y a une iframe dans le code source de ma page web (avec un id différent à chaque rechargement, ça va être simple pour la cacher). Peut-être que ça vient de là?

[NoSmoking]

Bonjour,

Peut-être que ça vient de là?

je ne sais pas mais as tu essayé un simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
iframe {
  display:hidden;
}

le mieux me semble quand même de voir l'origine de cette IFRAME et de voir si il n'y a pas moyen de faire différemment.

[Benduroy]

Oui j'ai essayé et ça ne vient pas de là. Par contre j'ai rajouté un navbar-fixed-top à ma div de menu et ça à l'air d'être bon. On ne peut plus scroller avec le doigt vers la droite ou vers la gauche.

EDIT: ah ben non en fait :/

[NoSmoking]

Et si tu nous donnais le code de ta page de test, HTML et CSS, ou encore une adresse en ligne.

[Benduroy]

Tu peux aller voir ce que ça donne ici

[NoSmoking]

Le moins que l'on puisse dire c'est que ce code ne rentrera pas dans le top 10

Ce morceau de code, <div id="marques"> se retrouve un nombre incalculable de fois alors qu'une ID DOIT être UNIQUE mais il y a pire, des TABLEs dans des TABLEs de partout, mais je m'arrête là il y a trop à dire !

Au final je n'ai pas été très loin mais ton soucis est dans le conteneur <div class="container">, ajoute un overflow:hidden et hop plus de problème.

A toi de voir quel élément déborde mais vu le code cela risque de ne pas être simple

[Benduroy]

Merci de ta réponse NoSmoking.

Ce morceau de code, <div id="marques"> se retrouve un nombre incalculable de fois alors qu'une ID DOIT être UNIQUE

Je reprends un code déjà écrit donc là c'est vrai que c'est pas génial. En même temps le style est quand même appliqué dans tout les cas. Donc je crois qu'il va falloir que je me (re) renseigne sur la différence class/id

mais il y a pire, des TABLEs dans des TABLEs de partout

Alors là par contre c'est bien moi. Je trouve ça plus simple pour la mise en page :S

ajoute un overflow:hidden et hop plus de problème.

J'ai ajouté ceci à mon css:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.container {
		overflow: hidden;
	}

Mais pas de changement :/

Autant pour moi ça fonctionne bien. Merci