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, 3 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:

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free