[CSS] Responsive Line Breaks

[CSS] Responsive Line Breaks

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;}
}

 
[sc name=”customcss”]
 

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>

voila!

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!
 
[sc name=”learn css”]
 
[sc name=”responsive-ad”]
 
[sc name=”podcast”]
 
 

 

Photo by Jeremy Bishop on Unsplash

Leave a Reply to Dawn Sparks Cancel reply

Your email address will not be published. Required fields are marked *

  1. Hi, So I have a question about line breaks. I’m a copywriter and write for a lot of website design clients. One designer I work with tells me “If you want to have those words on their own, we would have to introduce line breaks. This can look bad on different screen sizes and typically advise against this style of text formatting.”. Is there no way around this? Sometimes, you want the first or last line of copy to start or end with a certain word for emotional impact or clarity. This is super frustrating. Any advice?

    • Hi Dawn, I agree, unruly line breaks can be ugly.

      This post is about being able to manage line breaks depending on screen sizes, and it works pretty well.

      Let me know if you have any trouble implementing it!

  2. This worked perfectly for my site.
    Thanks

    • Mi Matt, Thanks, Happy to help!

  3. Thank you for sharing this! I had been doing it a different way but it wasn’t working and this is much cleaner. Works great in Squarespace!

    • Hi Theresa, thank you for the kind words.

      Luckily, this is a HTML+CSS solution, so it works well on almost every platform. Happy to hear this tut helped!

  4. 4.5

  5. 5

New tutorials

Why no ads?

Hi, I'm PK, and I maintain and publish content on this site for two reasons.

  1. To give back to the community. I learned so much from people's tutorials and StackOverflow that I wanted to contribute and help others.

  2. To provide a more structured learning experience. People struggle to find the course that guides them from start to finish, based off of real life experience, and my courses provide that.

The only "ads" I have here are for my own courses, and maybe an affiliate link, but that's it. They fund the website resources and provide more motivation for me to produce better content.

Any bit of interest helps. Even sharing with your friends, suggesting my courses to your developer or designer, or subscribing to my YT channel, or joining our Discord. Thanks and I'll see you around!

There's a newsletter!

Sign up to the newsletter for the occasional updates on courses, products, tutorials, and sales.