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.
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.
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.
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.
0 Comments