Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

Nelson Miller Profile Orange
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.

▶️ Please watch the video above to get all the exciting details! 👆

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.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about 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

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. Dax Davis <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    It’s such a simple solution. I hate to admit it, but I never considered putting a class on a tag. Nelson, I love how your posts and solutions are always highly applicable and straightforward. Keep it up… PLEASE!

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart