- WordPress :6.1
- Statut : résolu
- Ce sujet contient 20 réponses, 2 participants et a été mis à jour pour la dernière fois par
chvxrouge@gmail.com, le il y a 2 années.
-
AuteurMessages
-
30 avril 2023 à 16 h 57 min #2453679
Bonjour,
Ma configuration WP actuelle 6.2
- Version de PHP/MySQL :
- Thème utilisé : Accelerate
- Extensions en place : Advanced Editor Tools, Advanced WP Columns, Akismet Anti-Spam, AMP, Auto Image Attributes From Filename With Bulk Updater, Backup For WP, Contact Form 7, Easy Google Maps, GA Google Analytics, Glue for Yoast SEO & AMP, Icon List, Image Widget, Maps Builder, Simple Links, W3 Total Cache, WP All Import, Yoast SEO, optinmonster
- Nom de l’hébergeur : OVH
- Adresse du site : https://vertige-evasion.com/
Problème(s) rencontré(s) : Bonjour,
Je voudrais savoir comment faire apparaitre sur mobil les photos de début de page sur toute la largeur de l ‘écran (qu’il n y ai pas de bordure sur les cotés)? De même pour les photos du slider de la page d’accueil.
Dans la version ordinateur, les photos du sliders de la page d’accueil sont sur toute la largeur de l écran et les photos de debut des pages de descriptions prennent une moitié de largeur de page.
page d’accueil: https://vertige-evasion.com/
une des pages de description: https://vertige-evasion.com/canyoning-grenoble-lyon-isere-vercors-chartreuse/
Merci pour vos réponses,
sébastien
30 avril 2023 à 18 h 06 min #2453681Bonjour,
Essayez ceci dans les CSS personnalisées:
@media screen and (max-width:950px){
.inner-wrap.clearfix, .slider-cycle.inner-wrap, .service-image img {
margin:0px;
width:100%;
}
}-
Cette réponse a été modifiée le il y a 2 années par
ferman.
30 avril 2023 à 18 h 23 min #2453686Merci de votre réponse Ferman, mais du coup tout est dans toute la largeur de la page (les textes, les cardes…) trop près du bord à mon gout. Est-ce qu’il est possible que cela ne concerne que les photos de début de page et le slider?
merci
30 avril 2023 à 19 h 37 min #2453688Je regarde pour une solution simple.
-
Cette réponse a été modifiée le il y a 2 années par
ferman.
30 avril 2023 à 19 h 46 min #2453690merci!
pour ma culture, le <span class= »token punctuation »>(</span><span class= »token property »>max-width</span><span class= »token punctuation »>:</span><span class= »token number »>950</span><span class= »token unit »>px</span><span class= »token punctuation »>) correspond à quoi? à la taille de l écran de la majorité des smartphone?</span>
30 avril 2023 à 21 h 09 min #2453709Essayez en ajoutant ceci aux règles précédentes et ajustez 90% à votre convenance.
#main p{width:90%;
margin-left:auto;
margin-right:auto;
}…à la taille de l écran de la majorité des smartphone?
à un peu plus que la taille de l’écran du plus grand des smartphones en position horizontale et des tablettes en position verticale.
1 mai 2023 à 9 h 32 min #2453717Bonjour,
la règle :<span class= »token selector »><span class= »token id »>#main</span> p</span><span class= »token punctuation »>{</span><span class= »token property »>width</span><span class= »token punctuation »>:</span><span class= »token number »>90</span><span class= »token unit »>%</span><span class= »token punctuation »>;</span> <span class= »token property »>margin-left</span><span class= »token punctuation »>:</span>auto<span class= »token punctuation »>;</span> <span class= »token property »>margin-right</span><span class= »token punctuation »>:</span>auto<span class= »token punctuation »>;</span> <span class= »token punctuation »>} ne change rien. j’ai essayer 50% pour voir aussi mais rien.</span>
1 mai 2023 à 9 h 42 min #2453718et ce qui est bizzard c est qu avec la 1ere règle que vous m avez donné, toutes les pages ne sont pas modifiées sur smartphone…vous savez pourquoi?
1 mai 2023 à 11 h 03 min #2453723Chez moi, je vois que les CSS que vous avez mises fonctionnent. Il semble que vous venez de faire un essai avec le deuxième code; les paragraphes étaient bien réduits en largeur. Je suppose aussi que vous venez d’enlever ce deuxième code et les paragraphes sont revenus en pleine largeur.
Cela n’influait pas sur les CSS mais dans votre code, les accolades étaient mal mises; il faut écrire:
@media screen and (max-width:950px) {
.inner-wrap.clearfix,
.slider-cycle.inner-wrap,
.service-image img {
margin:0px;
width:100%
}
#main p{width:90%;
margin-left:auto!important;
margin-right:auto!important;
}
}Vous voyez que j’ai également ajouté !important pour la largeur des paragraphes. Il arrive que ce que l’on voit dans le simulateur d’écran smartphone sur PC (l’outil utilisé pour déterminer les CSS sur mobile) ne soit pas bien reproduit dans les CSS personnalisées. Le !important « renforce » la règle. Encore que dans votre cas ça ne semble pas être nécessaire. Je pense plutôt qu’il y a un problème de cache.
Remettez les deux codes comme ci-dessus. Dites-moi quand c’est fait et je vais regarder sur mon mobile et sur PC.
Dites-moi aussi sur quelles pages le code ne fonctionne pas. Pour moi il fonctionne sur les pages que j’ai essayées mais je n’ai pas tout testé.
-
Cette réponse a été modifiée le il y a 2 années par
ferman.
1 mai 2023 à 11 h 55 min #2453727Merci beaucoup e votre aide.
je ne vois pas de changement… certaines pages comme celle là ne sont pas du tout modifié:https://vertige-evasion.com/via-ferrata-grenoble-lyon-isere-vercors-chartreuse/
En ce qui concerne les pages qui ont maintenant la photos de début de page sur toutes la largeur de l écran du tel, tout ce qui est en dessous (texte,cadre, gallerie photo…) est également dans toute la largeur. j’aurais aimé garder une marge droite et gauche pour ces éléments.
1 mai 2023 à 12 h 38 min #2453728En ce qui concerne les pages qui ont maintenant la photos de début de page sur toutes la largeur de l écran du tel, tout ce qui est en dessous (texte,cadre, gallerie photo…) est également dans toute la largeur.
J’ai bien compris ça et avec le code actuel, ça ne devrait pas. Autre chose, normalement je devrais voir les codes CSS apparaître sur toutes les pages mais ce n’est pas le cas. Où exactement avez-vous mis les CSS personnalisées? Comme sur la pièce jointe? Si oui, il doit y avoir un problème de cache. Pouvez-vous vider le cache de WPsupercache?
Fichiers joints :
Vous devez être connecté pour voir les fichiers joints.1 mai 2023 à 13 h 33 min #2453730tous les ajouts de code sont dans le css additionnel de « personnaliser »
j’ai vidé le cache de w3 total cache, et maintenant, tout est dans la largeur de l’écran sauf la photo en début de page.
1 mai 2023 à 13 h 36 min #2453731il y a en fait une légère bordure droite et gauche des textes (ce qui est très bien), mais la photo de début de page a la même (elle n’est pas sur toute la largeur de l ‘écran)
1 mai 2023 à 14 h 41 min #2453732Ce sont les photos à l’intérieur d’un paragraphe et elles prennent donc la largeur du paragraphe. Ajoutez ce qui suit. On va finir par y arriver.
#main p img.alignleft {
max-width:115%;
margin-left:-5%;
}nb: les images sont aussi agrandies en format tablette (jusqu’à 950px de largeur d’écran). Vérifiez et dites-moi s’il y a encore quelque chose qui cloche. Attention au cache.
1 mai 2023 à 15 h 03 min #2453733c’est parfait avec un réglage -8%.
merci beaucoup!!!!
est-ce qu’il y a moyen également de créer une bordure droite et gauche au niveau de la « galerie photo » (les 4 petites images disposées en carré sur telephone) et sur les vignettes d’activités?
-
AuteurMessages
- Vous devez être connecté pour répondre à ce sujet.