<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Text Module Archives - WPPortfolio &ndash; Expert Divi Freelancer &amp; WordPress Web Design</title>
	<atom:link href="https://wpportfolio.com/tag/text-module/feed/" rel="self" type="application/rss+xml" />
	<link>https://wpportfolio.com/tag/text-module/</link>
	<description>Custom Divi Designs &#38; WordPress Solutions for Small Businesses</description>
	<lastBuildDate>Wed, 14 Jan 2026 05:16:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.3</generator>

<image>
	<url>https://wpportfolio.com/wp-content/uploads/2019/04/cropped-WP-Portfolio-favicon-32x32.png</url>
	<title>Text Module Archives - WPPortfolio &ndash; Expert Divi Freelancer &amp; WordPress Web Design</title>
	<link>https://wpportfolio.com/tag/text-module/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Center Align Text on Mobile View when using DIVI</title>
		<link>https://wpportfolio.com/center-align-text-on-mobile-view-when-using-divi/</link>
		
		<dc:creator><![CDATA[Girish Dadlani]]></dc:creator>
		<pubDate>Sat, 01 Feb 2020 08:58:00 +0000</pubDate>
				<category><![CDATA[DIVI Text Module]]></category>
		<category><![CDATA[Alignment]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Divi]]></category>
		<category><![CDATA[Text Module]]></category>
		<guid isPermaLink="false">https://wpportfolio.com/?p=118673</guid>

					<description><![CDATA[<p>Your text is left aligned on the desktop and you want it centered only on the mobile? In this DIVI tip we will learn how to center the text on mobile using CSS.</p>
<p>The post <a href="https://wpportfolio.com/center-align-text-on-mobile-view-when-using-divi/">Center Align Text on Mobile View when using DIVI</a> appeared first on <a href="https://wpportfolio.com">WPPortfolio &ndash; Expert Divi Freelancer &amp; WordPress Web Design</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><div class="et_pb_section et_pb_section_0 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_row et_pb_row_0">
				<div class="et_pb_column et_pb_column_4_4 et_pb_column_0  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_0  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><strong>UPDATE (5 March 2022) :</strong> 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.<br />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 &#8211;&gt; Design Tab and under Text Alignment &#8211; 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. </p>
<p><img fetchpriority="high" decoding="async" src="https://wpportfolio.com/wp-content/uploads/2022/03/Center-Align-Text-on-Mobile-DIVI-Options-251x300.jpg" width="251" height="300" alt="Center Align Text on Mobile DIVI Options" class="wp-image-118981 alignnone size-medium" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p>The following tutorial applies to only very old versions of DIVI.</p>
<p>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.</p>
<p>&nbsp;</p>
<div id="attachment_118915" style="width: 1182px" class="wp-caption aligncenter"><img decoding="async" aria-describedby="caption-attachment-118915" class="wp-image-118915 size-full" title="Left Aligned Header and Text on Desktop" src="https://wpportfolio.com/wp-content/uploads/2019/11/Left-Aligned-Header-and-Text-on-Desktop.jpg" alt="Left Aligned Header and Text on Desktop" width="1172" height="615" srcset="https://wpportfolio.com/wp-content/uploads/2019/11/Left-Aligned-Header-and-Text-on-Desktop.jpg 1172w, https://wpportfolio.com/wp-content/uploads/2019/11/Left-Aligned-Header-and-Text-on-Desktop-980x514.jpg 980w, https://wpportfolio.com/wp-content/uploads/2019/11/Left-Aligned-Header-and-Text-on-Desktop-480x252.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1172px, 100vw" /><p id="caption-attachment-118915" class="wp-caption-text">Left Aligned Header and Text on Desktop in DIVI</p></div>
<p>&nbsp;</p>
<p>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.</p>
<p>&nbsp;</p>
<div id="attachment_118916" style="width: 918px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-118916" class="wp-image-118916 size-full" title="Module Settings in DIVI Visual Builder" src="https://wpportfolio.com/wp-content/uploads/2019/11/Module-Settings-in-DIVI-Visual-Builder.jpg" alt="Module Settings in DIVI Visual Builder" width="908" height="618" srcset="https://wpportfolio.com/wp-content/uploads/2019/11/Module-Settings-in-DIVI-Visual-Builder.jpg 908w, https://wpportfolio.com/wp-content/uploads/2019/11/Module-Settings-in-DIVI-Visual-Builder-480x327.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 908px, 100vw" /><p id="caption-attachment-118916" class="wp-caption-text">Open Module Settings in DIVI Visual Builder</p></div>
<p>&nbsp;</p>
<p>Next we will head over the Advanced Tab -&gt; CSS Class and assign a class called center-text-on-mobile as shown below.</p>
<p>&nbsp;</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-118917 size-full" src="https://wpportfolio.com/wp-content/uploads/2019/11/Assign-a-Class-to-your-text-module.jpg" alt="Assign a CSS Class to your DIVI Text Module" width="380" height="519" srcset="https://wpportfolio.com/wp-content/uploads/2019/11/Assign-a-Class-to-your-text-module.jpg 380w, https://wpportfolio.com/wp-content/uploads/2019/11/Assign-a-Class-to-your-text-module-220x300.jpg 220w" sizes="(max-width: 380px) 100vw, 380px" /></p>
<p>&nbsp;</p>
<p>Save  changes to your text module and lets add our CSS to center the text on tablets and mobile.</p>
<h2>CSS to Center align the text on DIVI Contact Form</h2>
<p>To add the CSS, head over to your style.css in your child theme and paste the following CSS.<br />Alternatively you can also go to DIVI -&gt; Theme Options and paste the CSS in the Custom CSS box.</p>
<p>/* Center align text only on tablet and mobile */<br />@media (max-width:980px) {<br />.center-text-on-mobile .et_pb_text_inner,<br />.center-text-on-mobile .heading<br />{<br />text-align: center!important;<br />}<br />}</p>
<p>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).</p>
<p>Now when you view your page on mobile the text should be centered as shown below.</p>
<p>&nbsp;</p>
<div id="attachment_118921" style="width: 430px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-118921" class="wp-image-118921 size-full" title="Center Aligned Text on Mobile" src="https://wpportfolio.com/wp-content/uploads/2019/11/Center-Aligned-text-on-mobile.jpg" alt="Center Aligned Text on Mobile" width="420" height="542" srcset="https://wpportfolio.com/wp-content/uploads/2019/11/Center-Aligned-text-on-mobile.jpg 420w, https://wpportfolio.com/wp-content/uploads/2019/11/Center-Aligned-text-on-mobile-232x300.jpg 232w, https://wpportfolio.com/wp-content/uploads/2019/11/Center-Aligned-text-on-mobile-400x516.jpg 400w" sizes="(max-width: 420px) 100vw, 420px" /><p id="caption-attachment-118921" class="wp-caption-text">Center Aligned Text on Mobile</p></div>
<p>&nbsp;</p>
<p>I hope you enjoyed this quick tip. For more DIVI TIPS and TRICKS do visit my <a href="https://wpportfolio.com/divi-blog/">DIVI BLOG</a>.<br />If you like to hire me for designing or editing your DIVI website, send me a message on my <a href="https://wpportfolio.com/contact-divi-freelancer/">contact page</a>.</p>
<p>&nbsp;</p></div>
			</div>
			</div>
				
				
				
				
			</div><div class="et_pb_row et_pb_row_1">
				<div class="et_pb_column et_pb_column_4_4 et_pb_column_1  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_1  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><h2>Related Posts –</h2>
<ul>
<li><a href="https://wpportfolio.com/center-the-divi-footer-menu-and-bottom-bar-contents/">Center the DIVI Footer Menu and Bottom Bar Contents</a></li>
</ul></div>
			</div><div class="et_pb_module et_pb_comments_0 et_pb_comments_module et_pb_bg_layout_light">
				
				
				
				
				
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div><div class="et_pb_section et_pb_section_2 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_row et_pb_row_2">
				<div class="et_pb_column et_pb_column_4_4 et_pb_column_2  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_2  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><p><em>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<a href="https://www.elegantthemes.com/gallery/divi/" target="_blank" rel="noopener noreferrer"> DIVI theme</a> from Elegant Themes, since the past eight years. Do have a look at my <a href="https://wpportfolio.com/portfolio/">portfolio</a> to view my other completed projects. Feel free to <a href="https://wpportfolio.com/contact-divi-freelancer/">contact me</a> and I will get back to you immediately.</em></p></div>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div></p>
<p>The post <a href="https://wpportfolio.com/center-align-text-on-mobile-view-when-using-divi/">Center Align Text on Mobile View when using DIVI</a> appeared first on <a href="https://wpportfolio.com">WPPortfolio &ndash; Expert Divi Freelancer &amp; WordPress Web Design</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
