28172 sujets

CSS et mise en forme, CSS3

Problème de positionnement d'image sur la version mobile responsive

Bonjour,

Voici mon site wordpress : www.partikules.com.
Tout fonctionne à peu près comme je le veux sauf ce petit détail :
Mon site est responsive et sur les téléphones ma photo est complètement au sommet au lieu d'être placée correctement en dessous du menu comme sur la version pc, je n'arrive pas à la déplacer, est-ce que quelqu'un peut m'aider ?

Ci-joint l'illustration de mes propos.

Merci Smiley smile


Lysiane

upload/1491408340-65012-screenshot2017-03-30-12-07-25.jpg
Modérateur
Bonsoir Partikules,

Sur le bloc .header-text tu as un 
transform: translate3D(-50%, -50%, 0);
c'est lui qui décale tout vers le haut. Il décale de 50% de sa propre hauteur, hors sur un écran de mobile la hauteur du bloc est quasiement celle de l'écran, donc 50% vers le haut... ca dépasse.

Je en sais pas trop comment tu gère les adaptations mobiles masi soit tu joue avec cette valeur et les média queries soit il va falloir revoir le positionnement global de ton image parce-que ce qui est fait est plutôt bancal !

Tu as construit ce site de toi même ou tu utilises un outil ? Parce-que au niveau du code, c'est pas la joie désolé de te le dire... c'est une soupe de div imbriquées qui n'ont pas de hauteur, la pluspart des éléments hors du flux et un nombre impressionnant de CSS overridé ! Smiley ohwell
Bonjour.

J'ai aussi jeté un coup d'oeil sans trop savoir quoi dire : avant de savoir pourquoi ça ne fonctionne pas 'comment vous le voulez' sur mobile, j'ai essayé de comprendre pourquoi ça marche 'comment il faut' sur PC... Même ça, ce n'est pas évident...

Ce genre de site - apparemment fait sur Wordpress - n'est pas fait 'pour être repris à la main'... les éléments n'ont pas leur 'comportement naturel'... au lieu d'être positionnés les uns en-dessous des autres, ils sont superposés et décalés... avec position : absolute ou avec flexbox... chez moi, ça rame beaucoup...

Sans tout reprendre - je suppose que ce n'est pas votre intention - la seule solution est un décalage avec position : relative associé à une media-query. (Edit : comme vous utilisez déjà transform: translate3D, ce serait peut-être mieux de diminuer le décalage vers le haut - par exemple -45% - associé à une media-query)

Smiley smile
Modifié par Zelena (06 Apr 2017 - 09:18)
Bonjour,

Vous pouvez mettre règle css sur la version mobile :

par exmeple :

@media (max-width: 600px) {
  .header-text {
    top: 100px;
  }
}


Smiley cligne
Merci beaucoup pour vos réponses je vais essayer vos solutions.

Ce n'est pas moi qui est créer ce template, je l'ai juste installé et customizer Smiley ohwell ...

Du coup je ne suis pas une "as" du code je me limite aux basiques donc je me vois assez mal reprendre le codage, je vais me débrouiller avec ça et je reviendrais vers vous pour vous dire si ça a solutionner mon problème.

Encore merci Smiley smile
Je viens de tester, c'est donc beaucoup mieux je peux jouer avec la hauteur de l'image en modifiant les paramètres transform-3D mais du coup ça n'est toujours pas terrible le texte est beaucoup trop bas et trop étroit je ne sais pas non plus comment remonter et élargir le bloc, avez-vous une idée.

Un grand merci Smiley smile upload/1491491509-65012-screenshot2017-04-06-16-06-11.jpg
Modérateur
Coucou,

Alors déjà sur le transform3D tu peut laisser 50% en largeur (sinon c'est pas centré), c'est que en hauteur qu'il faut mettre moins.
transform: translate3D(-50%, -30%, 0);


Ensuite pour l'espacement je te conseillerais de virer ce padding :
@media only screen and (max-width: 767px){
.home-section img {
    padding-top: 120px;
}
}


Et pour la largeur du bloc il faut donenr une width à .header-text
Merci bien, il me reste juste 2-3 choses à régler, j'ai effectivement tenté de donner un width à .header-text mais si je fais ça, ça agrandit aussi les images et pas uniquement le texte, j'ai essayé plusieurs choses mais rien n'y fait je n'arrive pas à élargir le texte seulement.

Sinon autre problème quand on scroll vers le bas à un moment derrière le texte il n'y a plus de background, je sais que c'est la fin de l'image et en plus le texte déborde sur la section suivante "Mes services" j'aimerais remettre tout ça à sa place quitte à réduire la taille de la police, etc...

Je vous remercie d'avance Smiley smile

upload/1491558343-65012-screenshot2017-04-07-10-37-29.jpg
Sujet clos
Aller à