Email banner

Discussion in 'HTML and CSS' started by 19code2019, Nov 28, 2019.

  1. 19code2019


    Nov 28, 2019
    Likes Received:
    Hey, I have a question as I'm stuck with a situation.

    I need to create an email banner that is responsive (i.e. goes from mobile view to desktop view) with ease and I need to be able to use the code in exchange so that it can go to multiple people. I have some code at the moment but it's not responsive. The banner for the email works in desktop view but when it goes into the mobile view, the code runs down the left hand side of the page.

    The main issue that I have got with this is that I am only allowed to use HTML for this. I can use inline CSS but I'm not able to use JavaScript to my knowledge or use external sheets. What's the best way forward from this situation?

    (my background is websites so this feels like a completely different environment to me)

    Here is the link to the coding I am currently using for this:

    Any help is welcomed.
    Last edited: Nov 28, 2019
    19code2019, Nov 28, 2019
    1. Advertisements

  2. 19code2019


    Nov 28, 2019
    Likes Received:
    Your pen has no code in it. At least nothing that would even come close to what an Email should be.
    Emails are still HTML and inline CSS with limited CSS in the header section. It is still like coding for 2000 in that we still use table based layout. You must rely on percentages for mobile and limit the divs as they don't work well in some email clients. Instead of supporting browsers for cross-browser support, with email you have to support browsers, email clients, and a variety of devices. Also avoid the following:
    - using !important inline: Outlook will ignore everything after the !important
    - using custom fonts unless you use MS vml code as well. If Outlook doesn't recognize a font it will default to TNR regardless of the other fonts i the family
    Emails should be 600px to 630px wide MAX

    Banner images: use in this order to use images that are not exactly the width of your email
    - use in style tag: width: 100%; max-width: 600px;
    - and also include after the style tag: width="600"

    Google Litmus and Email on Acid blogs for more support.

    Good luck and welcome back to the early 2000's!
    TazzyT, Nov 28, 2019
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.