Getting Line-breaks to appear only in mobile

Not sure if anyone else knows about or uses a similar tip like this, but I've recently, through careful tweaking and experimenting, discovered a method to allow line-breaks to appear with responsive coding where there are none in the normal/desktop version of an email.

You can see it in action on this newsletter piece I designed:


Basically, the View in Browser and Forward to a Friend links were both formatted like this on the head:

› Forward to a Friend     |     › View in Browser

Code-wise, it appears like this:

<forwardtoafriend><span style="color: #FFFFFF; text-decoration: none;"><strong>›</strong> Forward to a Friend</span></forwardtoafriend>
            <span class="vanish">&nbsp; &nbsp; | &nbsp; &nbsp; </span>
            <webversion><span style="color: #FFFFFF; text-decoration: none;"><strong>›</strong> View in Browser</span></webversion>

Now that class of "vanish" is what's important.  In my media query, I have this declaration:

.vanish                    { color:#2e2e2e; }
.vanish:after                 { content:"\A"; white-space:pre; }

With that, I am telling the Vertical line to get the same color as the background, and with .vanish:after, I am giving it a hard line-break character.

So now, I can format text to on Desktop be delimited by bullet, vertical line, whatever I want, as long as I wrap it in a span with this class, I can force line-breaks to occur in my mobile version.

roshodgekiss roshodgekiss, 2 years ago

Wow, great tip there, Ben! As always, you're on the mark :D

Get in touch with us on Twitter:
We're also on Facebook:

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free