Email - Mobile Column Breaking Marketing

Asked

Viewed 212 times

0

Good afternoon, I’m developing a website for an email marketing, it is ready, but I’ve been looking on the internet and I saw that to leave responsive without using media query... and I tried to make some websites explains, but I could not understand well but I was able to develop, the difference is that this not working... I have a td with two speakers and wanted to break them... leave one underneath the other when mobile... go from 480px it already breaks. But it’s not working...

I want this part that breaks in two... to be under each other. inserir a descrição da imagem aqui

Follow the code below:

<!DOCTYPE html>
<html>
<head></head>
<body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-ms-text-size-adjust: 100%; font-size: 14px; -webkit-text-size-adjust: 100%; background-color: #ffffff; font-family: Tahoma, Verdana, sans-serif; text-align: center; -webkit-font-smoothing: antialiased; width: 100% !important;">
    <center style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color: #ffffff; font-family: Tahoma, Verdana, sans-serif; font-size: 14px; width: 100%;">
        <div style="max-width: 600px; -webkit-text-size-adjust: none; text-align: left; width: 94%;" align="left">
        <table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" width="100%" style="max-width: 600px;">
            <tr height="90">
                <td bgcolor="#fff" width="0%" height="0%"></td>
                <td bgcolor="#fff" border="0" height="100%" valign="middle" align="left">
                    <a href="#" style="-webkit-text-size-adjust: none;">
                        <img src="https://i2.wp.com/veropublic.wpengine.com/wp-content/uploads/2015/11/apple-iphone6-email-marketing.jpg?resize=780%2C873" alt="Verollate" width="100%" height="auto" border="0" style="color: #000;"></a>
                    </td>
                    <td bgcolor="#fff" width="0%" height="0%"></td>
                </tr>
            </tr>
            <tr>
                <td bgcolor="#000" width="0%" height="0%"></td>
                <td bgcolor="#000">
                    <table cellpadding="0" cellspacing="0" border="0" bgcolor="#000" width="100%" style="display: inline-block; vertical-align: top; max-width: 552px;">
                        <tr>
                            <td id="carrinho" bgcolor="#000" style="border-color: #000; width: 34%; border-width: 25px 10px 25px; vertical-align: top; height: auto; border-style: solid; color: #000; font-size: 14px; text-align: left; -webkit-text-size-adjust: none;" align="left">
                                <img src="https://i2.wp.com/veropublic.wpengine.com/wp-content/uploads/2015/11/apple-iphone6-email-marketing.jpg?resize=780%2C873" alt="Carrinho verollate" width="100%" border="0"></a>
                            </td>
                            <td id="conteudo-1" bgcolor="#000" style="border-color: #000; width: 66%; border-width: 10px 10px 20px; border-style: solid; color: #fff; font-size: 14px; text-align: left; -webkit-text-size-adjust: none; vertical-align: center;" align="left">
                                  Tenho o prazer de lhe apresentar a <b>Vero Latte</b>, uma nova experiência de gelato, elegante no tamanho e no modo de servir.
                  Quando a criei, em 2014, foi pensando justamente em momentos únicos da vida. E a celebração de um casamento é um desses momentos.
                  <br><br>
                  Cada receita e desenvolvida por mim com paixão e exclusividade, por meio da utilizção de nobres ingredientes em uma produção
                  legitimamente artesanal. Será muito especial ter a oportunidade de apresentar nossa marca a você.
                  <br><br>
                  Então, eu gostaria de convidá-la para conhecer o showroom da Vero Latte e participar de uma deliciosa tarde de degustação em nosso espaço.

                  <br><br>
                  Aguardo sua presença,
                  <br>
                  Mariana Galvão
                  <br>
                  (11)2506-9295
                            </td>
                        </tr>
                    </table>
                </td>
        <td bgcolor="#000" width="0%" height="0%"></td>
                <tr bgcolor="#ffffff">
                    <td colspan="3" align="center">
                        <img src="https://thumbs.dreamstime.com/t/fita-vermelha-33946534.jpg" width="100%" height="auto" />
                    </td>
                </tr>
            </table>
        </div>
        </center>
    </body>
    </html>

If anyone can help me, I’m happy, thank you....

css html5 table

  • Nathan, why don’t you want to use media query? Is it impossible to add at least one bootstrap to this project? use table to determine object layout is not a good practice...

  • So, because email-marketing he does not read these things, for example gmail he does not read media query, already the native Inbox of Ios already consegu, are practices that spoil the structure of an email-marketing... I learned these things at this link - http://sergiolopes.org/email-newsletter-mobile-responsive/ ... also on this link - https://www.campaignmonitor.com/css/ ... tip for anyone who wants...

  • Intendi, but take a look here at the doc of gmail: https://developers.google.com/gmail/design/reference/supported_css says it supports the media queries, the first link you sent is dated 2012, It may be that from there to here they have added this functionality.

  • opa, thanks... I’ll take a look yes

  • You will only get this by swapping the columns for another type of element and using float, it is likely that media-query works in most situations, but there is no way to break <td> why the table structure is totally different from float and inline-block.

No answers

Browser other questions tagged css html5 table

You are not signed in. Login or sign up in order to post.