1397 sujets

Web Mobile et responsive web design

Bonjour,

Alors voilà je rencontre des soucis quant à l'aspect responsive de mes "tableaux". J'ai créé des div qui contiennent des images ainsi que des textes qui sont disposés sur les côtés droits des images, sauf que je n'arrive pas à rendre cela responsive.. lorsque je le rentre sur Email On Acid pour le tester sur tous les formats, ça ne fonctionne pas comme je le souhaite. Cela dépasse totalement du cadre voulu. Je ne sais pas d'où vient le problème.. Mon cadre de base qui contient le code est un tableau de 650px maximum, je n'ai aucun souci pour faire rentrer du texte en dehors du code collé en dessous, tout le reste est responsive, à part le code que je vous donne. Je ne sais pas quoi faire. Il y a-t-il du code à rajouter pour qu'il s'adapte à l'écran ?

Voici mon code :



<div style="background-color: #1177bc; width:650px; margin:0px auto; max-width:650px; padding-top:20px; padding-bottom: 20px ">
<div style="float:left">
  <img src="images-comp/coins.png" alt="" border="0" width="100" height="100" style="display:block; padding: 0px 30px 30px 30px; margin-top:10px; "  /></div>
<div style="background-color: #1177bc; float:left; font-family: Helvetica, arial, sans-serif; font-size: 21px; color: white; text-align:justify; line-height: 24px; font-weight: bold; background-color: #eb212d; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 30px; max-width:500px">Mon texte</div>


<br><br>

<p style="max-width:550px; background-color: #1177bc; font-family: Helvetica, arial, sans-serif; font-size: 18px; color: white; text-align:justify; line-height: 24px; padding-left: 10px; padding-right: 10px;" >Petit texte à entrer ici </p>

                   </div>


Qui est censé donner ceci :

upload/1586425575-79447-capturedancran2020-04-09no11..png

Mon but est simplement de ne pas faire dépasser le texte hors du cadre..
Modifié par Ellydia (09 Apr 2020 - 11:47)
Bonjour,
tu as un fichier css à part, ou tu inscrit tout le css dans l'html?

Sinon je ne sais pas si tu l'a fait ailleurs mais tu peux essayer ceci dans le fichier css si jamais tu en a un :
@media only screen and (max-width: (LA TAILLE QUE TU VEUX)px)
{
//Ton code exclusivement pour les écrans de moins de (LA TAILLE QUE TU VEUX)
}

PS: pour forcer une largeur par exemple d'une div qui se situ dans un element, tu peux directement mettre "!important" après ta largeur...exemple :
width: 500px!important;

ou indiquer le chemin complet, en partant de l élément parent jusqu'a ta div, et là, pas besoin de mettre "!important"

en espérant que ça puisse aider
Modifié par melER5 (09 Apr 2020 - 14:43)