UPDATE (5 March 2022) : This tutorial was written a while back when DIVI did not have a built in Option to center aligning text differently on desktop, tablet and mobile.
With the new version, if your text is left aligned and you want to align it center on mobile, all you have to do is to go to the Text Module Settings –> Design Tab and under Text Alignment – Choose Mobile and click on the Center align as shown in the image below. You could choose any combination for eg. Center on Desktop and left aligned on tablet and mobile if you want. 

Center Align Text on Mobile DIVI Options

The following tutorial applies to only very old versions of DIVI.

Sometimes we want to align text to the center only on mobile. DIVI gives you options for aligning your text in the settings. The alignment that you choose will be same for desktop and mobile. But if you wanted your text alignment to be centered only on tablet and mobile, you can add a class to your text module and we will write some CSS to target the text module to change alignment on mobile.

 

Left Aligned Header and Text on Desktop

Left Aligned Header and Text on Desktop in DIVI

 

Lets assign a class to the text module in DIVI. To do so, we will open the text module settings in the DIVI Visual Builder as shown below.

 

Module Settings in DIVI Visual Builder

Open Module Settings in DIVI Visual Builder

 

Next we will head over the Advanced Tab -> CSS Class and assign a class called center-text-on-mobile as shown below.

 

Assign a CSS Class to your DIVI Text Module

 

Save  changes to your text module and lets add our CSS to center the text on tablets and mobile.

CSS to Center align the text on DIVI Contact Form

To add the CSS, head over to your style.css in your child theme and paste the following CSS.
Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box.

/* Center align text only on tablet and mobile */
@media (max-width:980px) {
.center-text-on-mobile .et_pb_text_inner,
.center-text-on-mobile .heading
{
text-align: center!important;
}
}

We are writing a media query here, to target only devices that are less than 980px. You can reduce the max-width:980px in the CSS above to 767px, if you want the text centered only on mobile (and not on tablet).

Now when you view your page on mobile the text should be centered as shown below.

 

Center Aligned Text on Mobile

Center Aligned Text on Mobile

 

I hope you enjoyed this quick tip. For more DIVI TIPS and TRICKS do visit my DIVI BLOG.
If you like to hire me for designing or editing your DIVI website, send me a message on my contact page.

 

0 Comments

Submit a Comment

Your email address will not be published.

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

Share This