Menu icon Foundation
Email: conflict with Bootstrap row class

This is an odd one.

I deploy emails from Convio Luminate. I've discovered that, when I click the "view as a webpage" link I've placed at the top of my email, a web view of my email pops up, as expected. Problem is, several of the rows in the body of the email are shifted to the left, while others remain properly centered in the page.

What I discovered is that the page utilizes Bootstrap — and it, too, has a "row" class. That row class has a left margin set to -15px. That's what's throwing off the layout. If I go through and either remove or refactor that class in my email, the problem is solved. Is there a way, within the Foundation for Emails framework, that this could be resolved? It appears to be a namespace issue — any way the framework could adjust the row class name during the build process?

Or is this a bit of an edge case?

_bryan

emailBootstrapnamespaceconflictrowclass

This is an odd one.

I deploy emails from Convio Luminate. I've discovered that, when I click the "view as a webpage" link I've placed at the top of my email, a web view of my email pops up, as expected. Problem is, several of the rows in the body of the email are shifted to the left, while others remain properly centered in the page.

What I discovered is that the page utilizes Bootstrap — and it, too, has a "row" class. That row class has a left margin set to -15px. That's what's throwing off the layout. If I go through and either remove or refactor that class in my email, the problem is solved. Is there a way, within the Foundation for Emails framework, that this could be resolved? It appears to be a namespace issue — any way the framework could adjust the row class name during the build process?

Or is this a bit of an edge case?

_bryan

This post has been closed. No new replies can be added.

Rafi Benkual over 2 years ago

Hi Bryan,

I can see the challenge there. It's weird that the view is webpage link wraps an email in a website - this may cause problems for any email if the classes match. Typically loading an iframe of the email into a webpage is safer. I digress..

I think name spacing as you've done is the easiest solution, maybe with a wrapper class or ID so you don't have to change every .row

Bryan over 2 years ago

Thanks, Rafi.

Luminate is a fairly big player in the non-profit fundraising space. It provides an environment for email development/deployment, as well as a robust CRM, a CMS, and a donation management system. So their "view as a web page" link causes the email to be opened in a page generated by the CMS, essentially. At least, that's the way it seems to work.

I'll explore the wrapper class/ID you recommended as a timesaving alternative to manually changing every .row.

Thanks again!

Bryan over 2 years ago

Hey again, Rafi —

Just wanted to post a quick follow-up. As you suggested, I added an ID (#fix-margin) to the body tag of the default layout; then added styles in app.css to set left and right margins of all .row elements (#fix-margin .row) to zero. Built a fresh email, brought it into Luminate and tested: the view-as-web-page version of my email now looks like it should!

Brilliant tip — thanks very much. I'm sure this'll come in handy again sometime soon.

_bryan

Rafi Benkual over 2 years ago

So awesome! And good to know about the Luminate CMS. Every ZURB Wired we build a Foundation site on WordPress but another alternative would be welcome.

What type of emails did you end up building? Are they newsletters?

Bryan over 2 years ago

Luminate is a turnkey system designed with non-profit fundraising in mind, but the email component of it is nice in that it pretty much stays out of your way. It's a vanilla editor — when you disable the WYSIWYG tools — so you can just paste in your code. It doesn't add any junk to the code, either. That makes it super-handy for working with Foundation for Emails.

This time around, it's just fairly straightforward informational emails promoting the big annual fundraising run/walk event. But my next project is a newsletter. I'm very excited to see how F4E works.