Here is the CSS i put into my child theme. I am using SiteOrigin North and the SiteOrigin page builder plugin.
/*center the text and adjust the width ABOUT SECTION*/
P.blocktext {
/* margin-left: auto;
margin-right: auto; */
width: 30em
}
Here is the HTML I put into the SiteOrigin Hero widget.
<h1 style="text-align: left;"><b>A LITTLE BIT</b></h1> <h1 style="text-align: left;"><span style="color: #f42222;"><b>ABOUT US</b></span></h1> <p class="blocktext" style="text-align: left;"><span style="color: #ffffff;"><b>Founded in 2015 by fitness enthusiasts, bodybuilders and athletes we are a small business dedicated to manufacturing the highest quality fitness products and providing them to our customers at an affordable price. Our team researches, designs and tests every product we manufacture. All of our products come with a LIFETIME WARRANTY when product is registered within 14 days of purchase!</b></span> <h3 style="text-align: left;"><span style="color: #f42222;"><b>Get Your Sweat On!</b></span></h3>
Here is an image of what is happening:
The image represents 1 row with one column of the page builder plugin with a SiteOrigin Hero widget inserted with a row underneath for my social networking information. As you can see in the image the headers are aligning center but the descriptive text is not. My end goal is to have all the text centered and the width of the descriptive text to roughly match the width of the headers. Does anyone know why this text is not centering? Any help would be greatly appreciated! Thanks.
Hi Fause,
The CSS you’ve used via the selector doesn’t have any real method to center the text. I would recommend adding text-align: center; to it do so. With that said, as you’ve manually added text-align: left; to the paragraph the selector won’t be taken into effect. You should either remove it, or replace it with text-align: center;
Let me know if this helps.