Problème sur mobile

[Sabrina2312]

Bonjour à tous,

Je vous soumets mon problème en espérant que quelqu'un puisse m'aider à comprendre et à résoudre ce problème :
Je viens tout juste de créer un site. Dans mes articles, j'ai mis des encadrés dont le code est :

<div style="width: 600px; padding-top: 15px; padding-bottom: 2px; border: 0px solid #ffffff; text-align: center; background: #b9bcbf;">

Le problème est que sur mobile, ces encadrés ne passent pas. On ne voit pas le texte à l'intérieur ou il est coupé plutôt (sur ordinateur tout se passe bien mais pas sur mobile)

Quelqu'un pourrait -il m'aider à résoudre ce problème ou me donner des pistes?

D'avance je vous remercie.

 

[frenchhorn]

border: 1px solid #ffffff

 

[Sabrina2312]

border: 1px solid #ffffff

Bonjour, merci de m'avoir rpondu. J'ai essayé mais ça ne fonctionne pas. Peux ton se parler en MP pour que je puisse te soumettre mon site si tu veux bien? Merci

 

[pprem]

bonjour
tu devrais peut-être spécifier aussi la couleur du texte dans ton style.
pour la bordure, effectivement, si tu ne lui mets pas de taille, autant ne pas la mettre du tout.
concernant les mobiles, le problème vient de la largeur que tu fixes à 600px. tu génères donc des ascenseurs horizontaux. tu devrais te documenter sur le responsive design. ton width:600px ne devraitpas exister... et d'une manière le style au niveau d'un tag HTML non plus.
pour solutionner ton problème, tu dois mettre une classe sur le DIV, faire une feuille de style avec la déclaration de media queries en fonction de la largeur de l'écran et y caser la largeur que tu veux dans la définition de la classe.
tu trouveras plus d'infos sur le sujet sur https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-ave ... ia-queries

 

[Sabrina2312]

Merci, Merci beaucoup, ça fonctionne.Mille fois merci

 

[Sabrina2312]

Re bonjour,

Une dernière question : j'ai 540 articles à modifier (au lieu de mettre width : 600px, je dois mettre width : auto). Est ce que je dois les reprendre un par un et modifier ou y a t-il une solution plus rapide.
De plus, le fait que border : 0px est il gênant? ou faut il que je les supprime? Si oui, avez vous un moyen rapide pour tous les supprimer.
Merci pour vos réponses

 

[Marie-Aude]

La bonne solution au lieu de mettre du style dans des textes, est de créer une classe css, ce qui permet de tout modifier en touchant simplement le fichier css. Là tu vas devoir tout modifier, effectivement. Autant en profiter pour remettre les choses en état correct, feuille de style css, et classe

Le border 0px indique que la bordure fait 0 px de largeur, donc qu'elle est invisible.

Comme te l'as dit pprem, autant supprimer cette indication.