Sqnkov Sqnkov - 4 months ago 19
CSS Question

Foundation for Emails Inliner tool breaks layout


EDIT: This problem is present in version 2 of Inliner, I tried V1 and everything is working fine.

Despite my small victory by using v1, the email is not being responsive at all, it displays as desktop version on mobile devices, while it is Responsive in the browser. All of my code is vanilla excerpts from the foundation tutorial.If someone is aware of how can I fix this problem, please share. Thanks!





I am making a reponsive email using Zurb Foundation for Emails. Everything works beyond good, but after I finish my email and put it into the HTML/CSS Inliner tool they provide , my email breaks. Everything is scattered around the browser, how can I bypass this problem?

I am using the default grid placement as described here on their Tutorial page.
The only thing different is that I added a few more rows and some custom styling in foundation.css for some internal ements, nothing to do with the grid, and some other inline styles which are also just color and text-align.

Here is my custom css:

#topRight {
padding: 3% 0 0 30%;
font-size: 12px;
}

#topRight a img, #topRight a span {
display: inline-block;
vertical-align: middle;
}

.serviceLinks a {
display: inline-block;
width: 32%;
}

.serviceLinks a img {
text-align: center;
margin: 0 auto;
}

#footer {
background: #32a0ca;
}
#footer p {
text-align: center;
color: #fff;
font-size: 12px;
}
#footer a {
color: #35cdff;
}
#footer th {
padding: 3%;
margin: 0;
}

Answer

I managed to work things out.

I used ZURB Email Stack , which turned out to be the most easy and responsive tool for the creation of a responsive email. It uses NodeJS, it runs its own local server and parses EVERYTHING for You, just like SASS/LESS/Stylus etc. manage to do it for You with CSS.

You create your layout in a separate module file which injects it into its own blank HTML template. It lets you focus on Your grid by using basic hierarchy like this:

<container>
  <row>
    <columns small="12" large="6">Column One</columns>
    <columns small="12" large="6">Column Two</columns>
  </row>
</container>

It basically does all the work for You. No tables, no table nesting and ghosting, no td's, no th's.

This is amazing. Try it.

IMPORTANT: While this tool works like magic, You MUST NOT forget to start Your Foundation watching process by using npm run build in Your CLI. This will force the framework to inline the CSS for You, because otherwise You will have to inline it manually, and this does not work, trust me.


Selected this as an answer because it solves my specific problem described in the top post.

Comments