Make Your Site Perfect
If you want to take control over how headlines or text stacks on desktop or mobile, you came to the right place. You can easily specify where a sentence or phrase should break to a new line. Whether you are making your site responsive on tablet and mobile, or just want to be picky about how headings look on desktop, this trick can be helpful to make your site just perfect. So in this tutorial I will show you how to make a line break in Divi text at a specific word or 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.
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:
Screenshot 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">
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.
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!
Thank you Dax, I appreciate the feedback and encouragement!