28172 sujets

CSS et mise en forme, CSS3

Bloc carré qui ne se rédimensionne pas en responsive avec image

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 Smiley decu

Merci beaucoup,
Jonathan

Ordinateur (comme je veux, ok changement à faire)

http://img11.hostingpics.net/pics/40040111pc.jpg

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

http://img11.hostingpics.net/pics/852501Ipad.jpg

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

http://img11.hostingpics.net/pics/322432iphone4.jpg
Modifié par jnceweb (06 Jan 2015 - 17:39)
Hello,

Il y a plusieurs raisons à ton problème :
1. La hauteur des blocs (div class="box") est en pixel (157px) et la largeur en pourcentage (23.5%). Si tu redimensionnes ta fenêtre, le 23.5% sera inférieur à 157px, tu auras donc un format rectangulaire.
2. Cette hauteur et cette largeur sont redéfinies dans une mediaquerie (@media screen and (max-width: 480px)), tes carrés sont donc plus petits avec un height de 100px sur les résolution < 400px.
3. Tes margins des blocs sont en px et non en pourcentage, c'est pour cela que le 4eme bloc passe à la ligne en dessous d'une certaine résolution.

Je pense que le mieux est de ne pas définir de hauteur pour ton bloc (il faudra enlever le position absolute sur les images pour les mettre dans le flux et faire d'autres ajustements).

Pour l'histoire des 4 blocs sur la même ligne, tu peux mettre tes margin left et right en pourcentage afin que la somme de ces margin et des largeurs de blocks soient égales à 100%.

Bonne journée Smiley smile
Modifié par tomInCat (06 Jan 2015 - 18:33)
Je pense qu'on tient le bon bout ! J'ai fait les modifications mais j'ai toujours un bug sur l'effet maintenant qui a un impact sur la hauteur des blocs... J'aurai encore besoin de toi pour ça stp Smiley smile Je ne pige pas d'où vient cette hauteur...

Merci beaucoup de prendre du temps pour m'aider Smiley smile
Modifié par jnceweb (07 Jan 2015 - 11:38)
Hello,

oups, je n'étais pas revenu de suite...

Alors je pense que ton bug vient du transform sur .box:hover .full-caption.
Au lieu de mettre :
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);


Tu pourrais mettre le top a 0 : 
.box:hover .full-caption {
    top: 0;
}


Tu peux aussi rajouter une transition css si tu veux garder ton effet.

Bonne journée Smiley smile
Je m'aperçois que je n'étais pas venu te remercier tomInCat ! A grand merci Smiley smile

J'ai une autre petite question, je n'ai plus les problèmes ci-dessus en revanche je m'aperçois que mes blocs sur Firefox et Chrome sont différents... il y a des décalages de malade

Par exemple avec cette page : http://www.lauraoupas.com/quoi-de-neuf

As-tu une idée d'où ça pourrait venir ? Sur Firefox mes blocs font bien 156px * 156px via une classe css mais sur Chrome il arrive que certains blocs passent à 157px... et va savoir pourquoi Smiley smile

Merci pour ton retour,
Jonathan
Modifié par jnceweb (20 Feb 2015 - 11:01)
Sujet clos
Aller à