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. Required fields are marked *

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 five 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