1485 sujets

Web Mobile et responsive web design

[Résolu] Image déformée en responsive

Bonjour à tous,


Je viens de créer un site d'après un template html :

http://www.fromagerie-clichy.fr/

Et je me rends compte que sur Smartphones et tablettes, les images qui séparent chaque section (#quote-dividerX") sont soit complètement déformées (dans le meilleur des cas), soit carrément invisibles.

Seules les images du slider de home restent belles et gardent leurs proportions, et parfois la première image en dessous reste correcte, mais les autres... on ne voit plus que des pixels :o(

J'ai bidouillé, fait des modifs de css, ai longtemps regardé le forum et le web avant de poster ce message, mais rien à faire, impossible d'obtenir quelque chose de mieux. Comme je suis débutant en CSS et responsive, peut-être que j'ai fait une erreur grossière ?

Si quelqu'un a une idée...

Merci !

JN
Bonsoir,

Et bien tu peux enlever la valeur fixed de la propriété background-attachment mais du coup tu perds "l'effet" d'arrière-plan fixe… :\
Super, merci.
Effectivement ça marche très bien en faisant ça, mais je perds l'effet "fixed". J'aimerais donc conserver le background-attachment fixed sur le site version ordi, et le supprimer sur la version smartphone. Il y a un moyen de faire ça avec le responsive ? J'ai essayé en mettant mon ID dans un viewport max-width=500px dans responsive.css, mais ça ne marche pas !

Merci !
Modérateur
superjn a écrit :
Il y a un moyen de faire ça avec le responsive ? J'ai essayé en mettant mon ID dans un viewport max-width=500px dans responsive.css, mais ça ne marche pas !

Ouep, avec les media queries t'as raison Smiley smile
http://www.alsacreations.com/article/lire/930-css3-media-queries.html
ca donnera un truc du genre :
@media (max-width: 500px) {
  #id{
    /* blabla */
  }
}


[EDIT] Bonjour !
Modifié par _laurent (01 Apr 2015 - 12:07)
Sujet clos
Aller à