- This topic has 9 replies, 2 voices, and was last updated 1 month, 2 weeks ago by
.
-
Posts
-
Hello Community,
I want to create multiple columns within an HTML section. For this, I need additional CSS code. How can I add extra CSS code to my newsletter?
Hello,
email design, expecially when it comes to structure, doesn’t rely much on css. If you’re using the html block, multiple columns structure can be obtained using nested tables. No css is needed.
Michael
Hello Michael,
I’ve already tried many things, for example, a table with two columns. However, in the mobile view, this caused the frame to extend to the right, creating a scroll bar. Could you please post an example of your solution?
Adrian
Hello Adrian,
if the frame exceeded the email container, you’ve probably misconfigured some widths. Here’s a basic template you can start with:
Let me know if that works for you.
Michael
Hello Michael,
thanks for your suggestion, but that’s still not the solution… The issue is that the fields should displayed side-by-side in the desktop view, but as soon as the resolution gets too low, the fields should be displayed one below the other. As far as I know, this only works with a DIV tag and CSS. If you know a HTML solution for this, that would be great, because a snippet like that is always useful…
… it would also super to have a function “additional CSS” in thenewsletterplugin.
Hello Adrian,
unfortunately CSS in email design doesn’t work like in regular web pages. There have been many progresses in the last few years but we’re still facing incompatibilities with many email clients so we cannot introduce any of the newer techniques for all our users.
If you’re using our visual composer, it should be fairly easy to obtain a 2 colums layout, but if you’re coding your own html section it would be better to think of a hybrid design. That would be:
1. You create your template with the dynamic blocks from our composer, e.g. posts,
2. You save it and switch to html editor (warning: you will not be able to switch back)
3. You create your desired 2 columns section with html, you can start with this article which explains the ropes of responsive email design https://www.litmus.com/blog/understanding-responsive-and-hybrid-email-design
4. Save it again and test.Unfortunately we cannot give much support on custom designs, other people may be helpful here in the forums.
Michael
Hello Michael,
I’ve found a suitable solution that integrates the CSS into the HTML tags and worked very well 🤓. Here’s my solution (this source code can be inserted into an HTML block):
<div style=”display: flex; flex-wrap: wrap; gap: 10px;”>
<div style=”flex: 1 1 200px; background: #eee; padding: 15px;”>
<h3>Column 1</h3>
<p>Contents of the first column.</p>
</div>
<div style=”flex: 1 1 200px; background: #ddd; padding: 15px;”>
<h3>Column 2</h3>
<p>Contents of the second column.</p>
</div>
</div>Hello Adrian,
that will never work on an email client. Please re-read my last reply. Use this website to check which html and css work in an email and which doesn’t.
Michael
But it works 🤷♂️
…after I’d sent it via thenewsletterplugin, it is displayed side by side in the desktop view (Thunderbird) and one below the other on my smartphone… just test it 😎
- You must be logged in to reply to this topic.