Stili di prova per adattamento mobile della newsletter

stili.css

    <style type="text/css">
    .bentonsansbook {
        font-family: "Benton Sans Book", Verdana, "Helvetica Neue", Helvetica, "Trebuchet MS", Arial;
        font-style: normal;
        font-weight: normal;
        color: #0e0e0e;
    }

    .bentonsanslight {
        font-family: "Benton Sans Light", Verdana, "Helvetica Neue", Helvetica, "Trebuchet MS", Arial;
        font-style: normal;
        font-weight: normal;
        color: #0e0e0e;
    }

    .bentonsansmedium {
        font-family: "Benton Sans Medium", Verdana, "Helvetica Neue", Helvetica, "Trebuchet MS", Arial;
        font-style: normal;
        font-weight: normal;
        color: #0e0e0e;
    }

    body {
        height: 100% !important;
        margin: 0;
        padding: 0;
        width: 100% !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0;
        padding: 0;
    }

    p {
        margin: 1em 0;
    }

    .ReadMsgBody {
        width: 100%;
    }

    .ExternalClass {
        width: 100%;
    }
    /* Force Hotmail/Outlook.com to display emails at full width. */

    .ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div {
        line-height: 100%;
    }
    /* Force Hotmail/Outlook.com to display line heights normally. */

    #outlook a {
        padding: 0;
    }
    /* Force Outlook 2007 and up to provide a "view in browser" message. */

    img {
        -ms-interpolation-mode: bicubic;
    }
    /* Force IE to smoothly render resized images. */

    body,
    table,
    td,
    p,
    a,
    li,
    blockquote {
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
    /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
    /* most modern email clients will be able to read this but not Gmail, if you're targeting gmail use inline css as well; most email clients still do not accept css link tag */
    /* css reset */

    * { -webkit-text-size-adjust: none; }

    html,
    body,
    div,
    span,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    blockquote,
    pre,
    a,
    code,
    img,
    small,
    strike,
    strong,
    sub,
    sup,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        -webkit-text-size-adjust: none;
        /* fix for iPhone and Android */
        font-family: "Benton Sans Light", Verdana, "Helvetica Neue", Helvetica, "Trebuchet MS", Arial;
    }

    body {
        line-height: 1;
        font-family: "Benton Sans Light", Verdana, "Helvetica Neue", Helvetica, "Trebuchet MS", Arial;
        width: 100% !important;
        background: #ffffff;
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: none;
    }

    table {
        border-collapse: collapse; border-spacing: 0; table-layout: fixed; }

    td {
        vertical-align: top;
        border-collapse: collapse;
    }

    p {
        color: #0e0e0e;
        font-family: "Benton Sans Light", Verdana, "Helvetica Neue", Helvetica, "Trebuchet MS", Arial;
        font-size: 12px;
        line-height: 18px;
        word-spacing: 1px;
        font-weight: 100;
        vertical-align: top;
        margin: 0;
    }

    p span {
        margin-top: -5px;
        vertical-align: top;
        margin: 0;
        line-height: 1;
    }
    /* specific styles for desktop viewing here, don't forget inline css; css mail client support guide: http://www.campaignmonitor.com/css/ */

    .wiew-online {
        text-align: right;
    }

    .wiew-online a {
        color: #666666;
        text-decoration: none;
        border: 0 none;
    }

    img {
        display: block;
        /* hotmail fix */
    }

    div {
        color: #0e0e0e;
        font-family: "Benton Sans Light", Verdana, "Helvetica Neue", Helvetica, "Trebuchet MS", Arial;
        line-height: 100%;
    }

    h2 {
        margin: 0;
        font-family: "Benton Sans Bold", Verdana, "Helvetica Neue", Helvetica, "Trebuchet MS", Arial;
        font-weight: 400;
        font-size: 12px;
        line-height: 12px;
        color: #0e0e0e;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    h3 {
        color: #0e0e0e;
        font-family: "Benton Sans Book", Verdana, "Helvetica Neue", Helvetica, "Trebuchet MS", Arial;
        font-size: 20px;
        line-height: 20px;
        font-weight: 100;
        text-align: left;
        margin: 0 0 30px;
        letter-spacing: .1px;
        word-spacing: .6px;
    }
    /* section header */

    .news,
    .work,
    .jobs,
    .speaking {
        width: 600px;
    }
    /* entry */

    .entry {
        margin-left: 2px;
    }
    /* entry image */

    .image-caption {
        color: #575757;
        font-family: "Benton Sans Light", Arial, sans-serif;
        font-size: 14px;
        line-height: 1.4em;
        text-align: left;
        font-style: italic;
        margin-top: 14px;
        width: 260px;
        margin-bottom: 40px;
    }
    /* entry content */

    .entry-content {
        color: #0e0e0e;
        font-family: "Benton Sans Light", Arial, sans-serif;
        font-size: 14px;
        line-height: 100%;
        text-align: left;
        margin-left: 24px;
        padding-bottom: 20px;
    }

    .entry-content p {
        color: #0e0e0e;
        font-family: "Benton Sans Light", Arial, sans-serif;
        font-size: 12px;
        text-align: left;
        padding-bottom: 20px;
    }

    .entry-content p.bentonsansbook {
        color: #0e0e0e;
        font-family: "Benton Sans Book", Arial, sans-serif;
        font-size: 20px !important;
        line-height: 28px !important;
        font-weight: 100;
        text-align: left;
        padding-bottom: 30px !important;
        letter-spacing: .1px;
        word-spacing: .6px;
    }

    .entry-content a {
        font-family: "Benton Sans Medium", Arial, sans-serif !important;
        text-decoration: none;
        border: 0 none;
    }

    .entry-content.small-entry-content {
        color: #0e0e0e;
        font-family: "Benton Sans Light", Arial, sans-serif;
        font-size: 14px;
        line-height: 100%;
        text-align: left;
        margin-left: 0;
        padding-bottom: 0;
    }

    .entry-content.small-entry-content p {
        color: #0e0e0e;
        font-family: "Benton Sans Light", Arial, sans-serif;
        font-size: 12px;
        text-align: left;
    }

    .entry-content.small-entry-content p.bentonsansbook {
        color: #0e0e0e;
        font-family: "Benton Sans Book", Arial, sans-serif;
        font-size: 20px !important;
        line-height: 28px !important;
        font-weight: 100;
        text-align: left;
        padding-bottom: 20px !important;
        letter-spacing: .1px;
        word-spacing: .6px;
    }

    .entry-content.small-entry-content a {
        font-family: "Benton Sans Medium", Arial, sans-serif !important;
        text-decoration: none;
        border: 0 none;
    }
    /* separator */

    .white-separator {
        border-collapse: collapse;
        background-color: #ffffff;
        line-height: 0px;
        width: 100%;
    }

    .article-link {
        color: #0e0e0e;
        font-size: 14px;
        line-height: 20px;
        margin-top: 30px;
    }

    .article-link a {
        color: #0e0e0e;
        text-decoration: none;
        -ms-word-break: break-all;
        word-break: break-all;
        word-break: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }

    #marginleft, #marginright {
        width: auto;
    }

    @media screen and (max-width: 640px) {
        html, body, table, img, td {
            max-width: 100%!important;
        }

        table {
            max-width: 96% !important;
            margin: 0 2%;
        }

        .entry-content {
            max-width: 100% !important;
            width: 100% !important;
        }

        .entry-content .entry-image {
            max-width: 100% !important;
            width: 100% !important;
        }
    }
    </style>