/*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></p>

<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:
https://imgur.com/ENvcQPW

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.

.facebook-hover {
    	background-image: url('imageURL');
	display:inline-block;
}

.social-slide {
	/*background-image: url('path/to/image.png');*/
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.social-slide:hover {
	background-position: 0px -48px;
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}

Here is the HTML I put into the SiteOrigin Edit widget.

<div>
<div class="facebook-hover social-slide"></div>
<div class="facebook-hover social-slide"></div>
<div class="facebook-hover social-slide"></div>
<div class="facebook-hover social-slide"></div>
</div>

Here is an image of what is happening:
https://imgur.com/nUMO99A

The image represents 1 row with 3 even columns, with only two SiteOrigin Edit widgets in the middle column. My end goal is getting the social icons to center like the text above them. Does anyone know why they are not centering? Any help would be much appreciated!

<div class="site-info">
			<div class="container">
				<?php
				siteorigin_north_footer_text();

				$credit_text = apply_filters(
					'siteorigin_north_footer_credits',
					sprintf( esc_html__( 'Theme by %s.', 'siteorigin-north' ), '<a href="https://siteorigin.com/" rel="designer">SiteOrigin</a>' )
				);

				if( !empty($credit_text) ) {
					?><span class="sep"> | </span><?php
					echo wp_kses_post( $credit_text );
				}
				?>
			</div>
		</div><!-- .site-info -->

[Link redacted]

The contact form’s div/container seems to cut off the 2nd picture, and the 3rd row/item in my devices section.

I want to make the #devices container absolute or push the contact form down, something to make all elements visible on the page.

Thanks for the help.

It seems my product page details are overwriting my my footer. It looks really weird.

Can anybody help me? I don’t know what to do.

https://www.janetandgeorge.com/shop/women-clothing-dresses/gemma-dress/?preview=true&preview_id=108&preview_nonce=8f4b2ae05a

I also want to resize the product image? Also the other product thumbnail images are overriding the Add To Cart button. Is it possible to change this?

Many thanks for your help.

Also in my footer and blog post title. This is currently invisible. It’s frustrating as I’ve tried everything, and the theme support is not helpful.
Hope you can help a desperate newbie.

My theme has a section where I can post customised css code. Thanks!

https://hehe14233.staging-cloud.partnerconsole.net/

Thanks!