Mon HTML va être envoyé sous forme de courrier électronique via un service de messagerie. Il sera donc lu / affiché dans Gmail, Yahoo Mail, Outlook et etc.
C'est pourquoi je ne peux pas utiliser en ligne-Flex.
(J'ai essayé de faire des cours en utilisant max-largeur, mais ils sont ignorés).
C'est ce que j'ai dans mon fichier, que j'inclus où il est nécessaire: Voici comment il se trouve sur le bureau qui va partiellement bien (je devrai apporter le premier bouton plus à la Gauche): Et voici comment il regarde sur mobile, comme vous pouvez le constater, clairement cassé: Tout ce que je veux, c'est avoir 1 objets un près de l'autre, puis sur mobile, le second à descendre, et les deux pour avoir la même largeur que leurs parents 
3 Réponses :
Peut-être une question stupide mais avez-vous utilisé une source de CSS externe? Et beaucoup de CSS ne peuvent pas être utilisés dans le modèle de messagerie. Cela provient d'un modèle que j'ai fabriqué et devrait travailler sur votre cas d'utilisation.
p>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0 " />
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
body { margin: 0; padding: 0; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; font-family: 'ubuntu', Helvetica, Arial, sans-serif; }
table { border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px;}
.table-button a:visited { color: #fff; }
.table-button a:hover { text-decoration: underline; }
.no_m { margin: 0px;}
@media only screen and (min-width:481px) and (max-width:649px) {
.em_main_table { width: 100% !important; }
.em_wrapper { width: 100% !important; }
.em_hide { display: none !important; }
.em_full_img { width: 100% !important; height: auto !important; }
.em_center { text-align: center !important; }
.em_h20 { height: 20px !important; }
.em_ptop { padding-top: 20px !important; }
.em_pbottom { padding-bottom: 20px !important; }
.em_pad1 { padding: 20px 10px !important; }
.header1_pad { padding: 0px 10px 20px 0px !important; }
.em_hauto { height: auto !important; }
.dimensions_30012018 { width: 100% !important; height: auto !important; }
.em_data-tablet { display: table-cell !important; }
}
@media screen and (max-width: 649px) {
.em_block { display: table-row !important; }
.top-half { width: 50% !important;}
.mobile_button { width: 100% !important; display: inline-block !important; padding: 5px 0px !important;}
}
@media screen and (max-width: 480px) {
.em_main_table { width: 100% !important; }
.em_wrapper { width: 100% !important; }
.em_hide { display: none !important; }
.em_center { text-align: center !important; }
.em_hide1 { display: none !important; }
}
</style>
</head>
<body class="em_body" style="margin:0px; padding:0px;" bgcolor="#f3f8fc">
<table role="presentation" class="em_wrapper" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table role="presentation" align="center" width="650" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:650px; table-layout:fixed;" bgcolor="#f3f8fc">
<tr>
<td mc:edit="zorgexpert" valign="top" align="center" style="padding:35px 25px 35px 25px; background-color:#ffffff;" class="em_pad1" bgcolor="#ffffff">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="center" class="em_black em_m_l" colspan="2" style="font-family:ubuntu, Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#333333;padding:11px 0px 19px;" valign="top">
<table role="presentation" align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td colspan="2" align="center">
<table role="presentation" class="em_wrapper" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="mobile_button">
<a class="em_link_nu" href="" style="mso-line-height-rule:exactly;color:#fff;text-decoration:none;font-weight:700;display:block;font-family:Verdana, sans-serif;font-size:14px;line-height:20px;" target="_blank">
<table role="presentation" width="240" border="0" cellspacing="0" cellpadding="0" bgcolor="#F2922C" align="left" style="width:240px;background-color:#04A0DA;border-radius:6px;" class="table-button table-button-bl em_wrapper">
<tr>
<td align="center" class="em_white" height="41" style="border-collapse:collapse;mso-line-height-rule:exactly;" valign="middle">
<span class="em_white" style="color: #ffffff; text-decoration: none;">
Button
</span>
</td>
</tr>
</table>
</a>
</td>
<td height="10" width="10px" class="em_hide" style="height:10px; width:10px; line-height:0px; font-size:0px;"> </td>
<td class="mobile_button">
<a class="em_link" href="" style="mso-line-height-rule:exactly;color:#fff;text-decoration:none;font-weight:700;display:block;font-family:Verdana, sans-serif;font-size:14px;line-height:20px;" target="_blank">
<table role="presentation" width="240" border="0" cellspacing="0" cellpadding="0" bgcolor="#F2922C" align="left" style="width:240px;background-color:#F2922C;border-radius:6px;" class="table-button table-button-or em_wrapper">
<tr>
<td align="center" class="em_white" height="41" style="border-collapse:collapse;mso-line-height-rule:exactly;" valign="middle">
<span class="em_white" style="color: #ffffff; text-decoration: none;">
Button
</span>
</td>
</tr>
</table>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Toujours l'un après l'autre. Toutes vos classes et @media sont ignorées par gmail :( s3.amazonaws.com/upload.hipchat.com/39260/829560/...
Juste une tête, vous devriez avoir une police de sauvegarde à lato, qui ne fonctionnera pas avec Outlook, Gmail ou quelques autres clients de messagerie qui ne prennent pas en charge les polices Web.
Si votre texte pour votre bouton va pour deux Lignes, vous allez avoir besoin de reconfigurer cela pour avoir l'air bien dans Outlook. Un bouton ne doit jamais avoir besoin de deux lignes. C'est un bon modèle pour vous aider à aller de l'avant. P>
Tout d'abord, vous avez besoin d'une requête multimédia: p> Suivant, vous allez avoir besoin Un conteneur de table pour votre email. p> Cet échantillon est une table de deux boutons très simple, reflétant ce que vous vouliez. J'ai ajusté le rembourrage pour les faire à peu près la même taille. P> Je vous laisserai de style le reste. P> bonne chance. p> p><table>
<tr>
<td class="stack-in-mobile">
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
<tr>
<td style="border-radius: 6px; background: #24b646;">
<a href="#" target="_blank" style="background: #24b646; border: 1px solid #24b646; font-family: sans-serif; font-weight: bold; font-size: 14px; line-height: 15px; text-decoration: none; padding: 13px 22px; color: #ffffff; display: block; border-radius: 6px; letter-spacing: 1px;">Manage Team</a>
</td>
</tr>
</table>
</td>
<td class="stack-in-mobile">
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
<tr>
<td style="border-radius: 6px; background: #ffffff;">
<a href="#" target="_blank" style="background: #ffffff; border: 1px solid #24b646; font-family: sans-serif; font-weight: bold; font-size: 14px; line-height: 15px; text-decoration: none; padding: 13px 12px; color: #24b646; display: block; border-radius: 6px; letter-spacing: 1px;">Billing Overview</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Cela fonctionnera et je sais que OP n'a rien dit à propos de quels appareils qu'il / elle prend en charge, mais si TD doit être TH pour qu'il fonctionne sur Android 4 et ci-dessous.
@Syfer Le bouton fonctionne dans Android 4.4, mais il ne s'empilera pas. L'empilement est le même problème avec Andoïde 6 et actuellement, iOS Outlook pour 11. Je mentirais si je disais que j'ai testé cela avec Donut, Froyo ou Honeycomb. Je ne suis pas sûr de pouvoir trouver une déclaration de sondage plus ridicule que d'indiquer que j'ai testé quelque chose à Froyo.
Je n'ai pas besoin de tester sur un périphérique spécifique. Impossible d'utiliser Chrome, Firefox ou d'autres personnes. J'ai besoin de pouvoir voir cela dans les clients du courrier. Maintenant, @media travaille sur le bureau. Mais sur les versions téléphoniques, Gmail et Ymail ignorent les classes du support afin que je ne puisse pas définir de code différent pour la version mobile ou du bureau :(
C'est ce qui a fait fonctionner après tous ces essais:
Vous pouvez faire cela à l'aide de classes HTML Frameworks (comme Bootstrap) ou à l'aide de requêtes multimédias dans votre fichier CSS. @media (max-largeur: 768px) {...}
Comme je l'ai dit, ceci est pour la modélisation Django, ce qui signifie que ce HTML est envoyé en tant que courrier électronique. Les clients de messagerie cassent des classes. J'ai essayé d'utiliser des cours mais ils sont juste ignorés et rien ne se passe. Peut-être que ce n'était pas clair dans mon titre, alors j'ai modifié aussi ma réponse
Je ne pense pas que vous puissiez le faire avec un courrier électronique car vous auriez besoin d'utiliser une requête médiatique et ils ne sont pas largement pris en charge dans les clients de messagerie (bien que je ne trouve pas de liste récente de clients qui les soutiennent)
Cela n'a rien à voir avec les modèles Django - vous obtiendrez exactement le même résultat que le HTML est généré (y compris avec HTML purement HTML).
@Arthurm - Ceci est pour un email HTML, pas un site Web. Cela ne peut pas utiliser Bootstrap.