Email banner

[19code2019]

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: https://codepen.io/19code2019/pen/vYYoaNP

Any help is welcomed.
Cheers

 

[TazzyT]

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!