How To Make A Line Break In Divi Text At A Specific Word Or Screen Size Tutorial by Pee Aye Creative

How To Make A Line Break In Divi Text At A Specific Word Or Screen Size

In this tutorial I will show you how to make a line break in Divi text at a specific word or a specific responsive screen size.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

How It Works

If you have a headline with some large text, but do not like how it is naturally stacking within its container width, you can add some HTML called a <br> tag, which stands for “line break,” to the text at a specific word.

It is very easy to do. Simply open any module that contains a textarea field, and be sure to click on the Text tab (this is like the HMTL tab). Find where you want the word to break to a new line, and add <br> there.

adding a br line break tag in Divi text

Example

In the following screenshots you will see an example of how much of a difference this simple little trick can make. Which one do you think looks better? 

Screenshot BEFORE:

Divi line break br tag headline example before

Screenshot AFTER:

Divi line break br tag headline example after

How To Make a <BR> Tag Responsive

If you only want to apply this specific line break on a smaller screen, or even if you want to show or hide it per device, you will need to add a class to the line break tab and also use a media query.

To add a custom class, open the module to the textarea again and click the Text tab. Inside the open and closing brackets, place class=”pa-line-break” as shown in the screenshot below. The complete HMTL code with the br tag and class is:

<br class="pa-line-break">
adding a br line break tag in Divi text for specific responsive sizes only

The class by itself is doing nothing, so now we must add some CSS to target that class. The goal is to tell the line break when to happen and when not to happen based on the screen size using a media query. You can choose from the example snippets below, but of course please remember you can modify things like the min or max width and value based on your own situation.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

Apply Line Break To Tablets And Phones Only

/*disable the line break on desktop*/
@media screen and (min-width: 981px) {
	.pa-line-break {
		display: none;
	}
}

Apply Line Break To Desktop Only

/*disable the line break on tablet and phone*/
@media screen and (max-width: 980px) {
	.pa-line-break {
		display: none;
	}
}

Apply Line Break To Small Phones Only

/*disable the line break on all screen except small phones*/
@media screen and (min-width: 479px) {
	.pa-line-break {
		display: none;
	}
}

RELATED: You may want to check our tutorial about adding media queries in Divi to learn more about how they work and how to make them.

How To Add Custom CSS Media Queries To Divi For Making Your Site Responsive On All Devices Tutorial by Pee Aye Creative

Last updated Jul 14, 2023 @ 3:55 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

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

Recent Posts

0

Your Cart