Hi. So mobile. Getting your content to look good is… important.

But sometimes yo
u run into probl
ems that are rea
lly frustrating.

Yeah, line breaks are hard to take control of when left on its own.

You can try a couple of different solutions:

1. Make a whole new module (if you’re using a page builder) or section that will load differently on different devices.

– Pros: Relatively easy to do. (Most page builders allow you to just check a device on/off, so just clone a module and click away)
– Cons: Sometimes the responsiveness can become unruly when whole modules switch out. Once you start caring about line breaks on all devices (as you should, but there are way too many people who don’t), then this could become too limiting and frustrating real soon.

I found that the cons outweigh the pros in this case.

So.. something else.

Also, if you want to really fine-tune and be really nit-picky about the responsive behavior, it really shows that extra bit of designer OCD that puts you above the crowd.

2. This is what I like to do.

Let’s start with the page:

Here’s the html to start with.

<p style="text-align:center; font-size:18px;"><strong>P</strong> 000-555-2368 | <strong>E</strong> info@almostinevitable.com</p>

In case you were wondering how I got the P and E to be red without a span, it’s with this css:

p > strong {color: #d00;}

Anyways, so it looks wonky on mobile, as you can see here:

Here’s what we want:
– Hide the vertical bar on mobile
– Drop the E to the next line on mobile

We need to start with media queries…

Add the following CSS somewhere.
(customizer > additional CSS, or add to the child theme’s stylesheet)

@media all and (min-width:551px) {
    .desktop-br {display: inline;}
    .mobile-br {display: none;}
@media all and (max-width:550px) {
    .desktop-br {display: none;}
    .mobile-br {display: inline;}

What you did was define a class that will act like a regular character when screen width is under 551px, and disappear when it’s 551px and over. Also, another class to tag-team with it so there’s a switch-like behavior to the line breaks.

So let’s put those media queries to work!

STEP 1. Hide the vertical bar.
Here, we add a span around the bar. It’s pretty straightforward.

<span class="desktop-br">|</span>

STEP 2. drop the E by adding a responsive line break.

<span class="mobile-br"><br></span>


Now here’s a neat little tip: You can actually style a br element.

Like this:

<br class="mobile-br">

Here’s the full line in case you want to check it out:

<p style="text-align:center; font-size:18px;"><strong>P</strong> 000-555-2368 <span class="desktop-br">|</span> <br class="mobile-br"><strong>E</strong> info@almostinevitable.com</p>

That’s it. Just the br with a class, and it’s a responsive line break. Pretty neat, huh?

This means that from now on, you can actually control all your line breaks!

Have fun with this newfound power!

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive



Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!


Photo by Jeremy Bishop on Unsplash