Discussion :

[jiojio]

Bonjour,

Je me permets de laisser un message sur le forum car après plusieurs jours de recherche et différents tests, je ne parviens pas à faire ce que je veux avec mon site.
En effet, je suis sous Wordpress Twelve et je n'ai aucun problème concernant le responsive de mes images d'article ou encore de la sidebar.
Toutefois j'ai créé des pages rubriques comme Lookbook, Voyage ou encore Pochette Surprise qui reprenne le même effet CSS au survol de l'image (voir rubrique sur http://www.lauraoupas.com)

Sur les desktops pas de problème mais cela se corse au niveau des images sur les smartphones et Ipad. Je ne comprends pas pourquoi les images deviennent des rectangles et non des carrés.
De plus j'ai l'impression que l'effet est mal géré.

Comme je vous le disais plus haut j'ai fait différents essais mais ils n'ont jamais été concluant c'est pourquoi je demande votre aide [decu]

Merci beaucoup,
Jonathan

Ordinateur (comme je veux, ok changement à faire)



Sur Ipad je voudrais 4 images par ligne et carré...



Sur Iphone avec 2 images par ligne. Pourquoi la hauteur a été modifié et n'est plus carré ?)

[Invité]

Bonjour,

style.css, ligne 156 :

Code :

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

1
2
3
4
5
6
7
8
.box {
    /* ... */
    height: 157px;
 
    /* ... */
    margin:5px; /* A REMPLACER par margin:0.75%; sinon, en réduisant la fenêtre, on se retrouve avec 3 photos par ligne, au lieu des 4 prévues */
    width: 23.5%; /* (0.75 + 23.5 + 0.75) = 100 % */
}

Pour bien faire, il faudrait redéfinir ce height :

• soit en fonction du media (via les media queries)
• soit dynamiquement via JavaScript (ou jQuery)

En jQuery, l'écriture est très simple :

Code javascript :

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

1
2
3
4
5
 	$(window).on( 'load resize', function(){
		$('.box').each( function(){
			$(this).height( $(this).width() + 'px' );
		});
	});

En CSS : cherche dans style.css à quel(s) endroit(s) se trouve .box {...}
En réduisant la fenêtre (-> phone ?), on trouve :

Code :

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

1
2
3
.box {
    width: 47.6%;
}

N.B. Sur Firefox, il existe la possibilité de visionner le site selon différentes résolution :
=> "ouvrir le menu" -> "développement" -> "vue adaptative" (Ctrl + Maj + M)

[jiojio]

Merci beaucoup pour ton aide jreaux62 ! J'espère que tu te n'es pas couché trop tard vu à l'heure que tu as posté le message ahah

L'affichage est déjà bien meilleur ! Merci
Toutefois j'observe quelques petites imperfections (décalage des blocs et hover qui se fait pas à 100%) comme tu pourras le voir ci-dessous :





Encore merci !

[Invité]

Bonjour,
on constate que la hautur calculée peut varier d'1 pixel (dépend de l'arrondi à la valeur supérieure ou inférieure ).
On va donc ruser et imposer la valeur inférieure :

Code :

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

1
2
3
4
5
 	$(window).on( 'load resize', function(){
		$('.box').each( function(){
			$(this).height( Math.floor( $(this).width() ) + 'px' );
		});
	});

Pour ce qui est du "hover", il y a certainement là aussi un peu de code à modifier.

[jiojio]

Je viens de faire la modification Merci

Tu penses qu'il faut modifier quoi pour le hover ? Car même en retirant le height dans le css j'ai toujours le rectangle...

Merci
Jonathan

[NoSmoking]

Bonjour,
peut être devrais tu commencer par corriger le code incorrect
validation de ta page.