Thanks to enormous help from @amit … I have been tweaking and organizing my newsletter CSS - and hitting walls. See below …
Not a CSS guru by any stretch - which this experience clearly demonstrates !
if anyone has any ideas - surely would appreciate any and all help.
(and of course - my seperators are centred on the email width - NOT the post copy …
Many thanks in anticipation
There are just a few things wrong. I have fixed them, at least you should have a proper alignment now. I haven’t fixed the background colour etc, as I wasn’t sure what you are going for. Here’s your css with the things fixed – you can copy this whole to your custom css.
Here are the changes that I have done. You had extra comments not properly commented out near header css. Gave auto margin to centre all contents. Removed float for blockquote.
I hope this helps!
I’m sorry to say this is not a direct answer to any of the particular questions you raise — I’m no CSS guru either — but I thought it might be useful to mention that I keep the CSS for the newsletter email (which isn’t processed by Hugo) separate from that for the blog posts. Before I separated them, Windows Mail was displaying blockquotes and links in shades of yellow on a white background! They were unreadable.
First, I removed the CSS content from “Edit CSS” on the Design page and put it in a new template, /css/noemail.css. Then, I edited the /layouts/partials/head.html template to remove the stylesheet link to custom.css and replace it with css/noemail.css.
Finally, I included in “Edit CSS” only the styles that I wanted to apply to the emails. (Obviously, I checked the box to include those styles in emails.) I’m using a big font size because Windows Mail (among who knows how many other email clients) doesn’t respect max-width. The result isn’t perfect but it’s better than it was.
@amit - many MANY thanks … Just been going through your CSS and comparing to mine … and the errors of my ways are unpacking before my eyes … such as
including // margin: auto; GAH / DUH
and clearly copy and paste went wild with ‘Move the header to the center’ - good grief!
Have copied your new code into the system - so let’s see later today what gets generated.
Thankyou again.
@artkavanagh - interesting … definitely not technical enough to understand why 2 CSS files would work - whereas one with the appropriate ’ .microblog_email 'before newsletter controls doesn’t … thanks for the insight. Will keep in mind as I move forward.
I don’t think I understand it well enough to explain why I needed to separate the CSS. Partly the complexities of the “cascade” and partly the inconsistently incomplete implementations of different mail clients, would be my guess. Anyway, the aim was to keep the email styles as simple as possible.
OK - as of today - my newsletter CSS is now finally presenting as I expect the current CSS to deliver - so 
- many thanks to @amit
The next job is to add a background color to the entire post - so that the posts themselves are white and stand out from the background - to stylistically appear like the site itself does (I am using Hitchens).
So my question is what is the CSS element that would control that?
