Having inspected the code I can see that tags are used to create space between the items and i suspect they are getting ignored. So my question is please⌠âHow can i get my newsletter to have a layout like below in both Bt mail & gmail?â
Iâll say now, I donât have that much experience with writing html/css specifically for Email. Iâm aware that support is not anywhere as good as in modern browsers.
But two points come to mind.
Maybe it doesnât like the new html5 way of doing a br. <br> Vs <br/>
And the other thing, maybe you should be doing this via css. A block container will start a new line and padding/margin bottom/top will give the gap.
Shhh. I shall say this very quietly as I would hate to let too many people know, but many bulk emails use HTML tables for layout. Itâs what many email clients expectâŚ
It comes back to this point:[quote=âSamA74, post:3, topic:213530â]
Iâm aware that support is not anywhere as good as in modern browsers.
[/quote]
Email clients are somewhat behind the times regarding html/css.
Going back to my comments about the queries, would they even recognise queries?
I never even considered it, I never thought of using them in a Email, I usually keep the css very simple for them.
Yes you can use media queries for mobile email clients as they understand it. Campaign monitor has some good starter templates that you can download and see how they do it. Iâve created quite a few emails and had them work quite well on mobile devices and desktop clients. Most desktop clients however do no understand media queries so you shouldnât aim them at them.
Historically some browsers used to ignore more than one break in a row because breaks are for line breaks and not to make space. You could try adding rules to the line break to give them a line-height but I doubt it would work.
What you should be doing is using table rows and table cells for that section and it will display almost everywhere. The image is in a table-cell and the text is in the next table cell just like web design of old.
Try to position everything with the table structure rather than margins and avoids floats and positioning.
It shouldnât take you long to convert that middle section to an old school table layout.
Note that js doesnât work in emails so donât include it unless its just for your online version.
That makes sense that mobile ones do understand them.[quote=âPaulOB, post:10, topic:213530â]
Try to position everything with the table structure rather than margins and avoids floats and positioning. It shouldnât take you long to convert that middle section to an old school table layout.
[/quote]
Never thought I would see Paul advocating table layouts
Looking at the html again, the bits where the <br>s are, the text is not in p tags. Just doing that and some margin-bottom on the p should do the trick.
Margin bottom fails in a lot of email clients(especially on p elements) and as I said above you should use tables and table rows and cells even for the spacing (empty cells). Avoid margin and even padding where possible for best results.
Html emails should only be done in tables unless they are plain text and even then are still best wrapped in a table. You really have to code like it is 1999 as far as html emails are concerned.
