To ensure that your text content appears just the way you want it you might want to control the text line breaks and define it for after specific words. Follow the steps below to see how that works.
Navigate to Divi > Theme Options > General Settings.
Scroll down to the bottom until you find the Custom CSS option.
Add the following CSS snippet:
@media screen and (min-width: 768px) and (max-width: 980px) {
br.divi-lb-phone-screens,
br.divi-lb-big-screens {
display: none;
}
}
@media screen and (max-width: 767px) {
br.divi-lb-tablet-screens,
br.divi-lb-big-screens {
display: none;
}
}
@media screen and (min-width: 981px) {
br.divi-lb-tablet-screens,
br.divi-lb-phone-screens {
display: none;
}
}Now you can add the following HTML tags to add a line break in the Divi modules right in your text depending on what screen size you want to target:
<br class="divi-lb-all-screens">
<br class="divi-lb-big-screens">
<br class="divi-lb-tablet-screens">
<br class="divi-lb-phone-screens">
Here's an example of how to use these line breaks for different screen sizes:
Important! Make sure you are using the Text tab of the Text Editor instead of the Visual tab.
By following these steps, you can precisely control text line breaks in your Divi modules, ensuring your content looks just the way you want it on various screen sizes.