Theme Horse

Hi jen.lynn.owen,

We have designed our theme this way. It needs code customization or hire a developer to fix it.
Go to theme folder -> inc -> widgets-> interface_widgets.php on line no 200 to 301. You need to edit over there. On line no 261 to 274 you will find below code. Remove this below code

<?php 
$j = 1;
	while( $get_featured_pages->have_posts() ):$get_featured_pages->the_post();
	$page_title = get_the_title();
	if( $j % 4 == 3 && $j > 1 ) {
		$service_class = "one-fourth clearfix-half";
	}
	elseif ( $j % 4 == 1 && $j > 1 ) {
		$service_class = "one-fourth clearfix-half clearfix-fourth";
	}	
	else {
		$service_class = "one-fourth";
	}
?>

and Paste this below code

 
<?php 
$j = 1;
	while( $get_featured_pages->have_posts() ):$get_featured_pages->the_post();
	$page_title = get_the_title();
	if( $j % 2 == 1 && $j > 1 ) {
		$service_class = "one-third clearfix-half";
	}
	elseif ( $j % 3 == 1 && $j > 1 ) {
		$service_class = "one-third clearfix-third";
	}	
	else {
		$service_class = "one-third";
	}
?>

Note: Instead of one-fourth you need to use one-third.

Hope this may help you!
Thank you!

Sorry! If you create the 3 widget column then you have to set three widget. It can not be centered dynamically while you set two widget instead of three.

Thank you!

First set only three services item and then again drag and drop the same service widget and set only two services item and let us know we will provide a custom CSS also do not forget to share the link of the site where you have set this.

Thank you!

Hi Jem,

Great! Now Go to Appearance -> Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:

#interface_child_service_widget-4.widget_service .one-third,
#interface_child_service_widget-2.widget_service .one-third {
    width: 46.36%;
}
@media only screen and (max-width: 767px) { 
#interface_child_service_widget-4.widget_service .one-third,
#interface_child_service_widget-2.widget_service .one-third {
    width: 100%;
}
}

Thank you!

Hi Jen,

If you want the same width as other with centered the services item then please remove above CSS code from the custom CSS option and paste the following CSS code and Click on save all changes button:

#interface_child_service_widget-4.widget_service .one-third,
#interface_child_service_widget-2.widget_service .one-third {
    margin: 0 0 0 12%;
}
@media only screen and (max-width: 1078px) {
	#interface_child_service_widget-4.widget_service .one-third,
        #interface_child_service_widget-2.widget_service .one-third {
		margin: 0 0 0 2.90%;
	}
}
@media only screen and (max-width: 767px) {
	#interface_child_service_widget-4.widget_service .one-third,
        #interface_child_service_widget-2.widget_service .one-third {
		margin: 0;
	}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#interface_child_service_widget-4.widget_service .one-third,
        #interface_child_service_widget-2.widget_service .one-third {
		margin: 0 0 0 3.44%;
	}
}

Thank you!

Hi Jen,

Could you also please help us rating this theme in WordPress Repository.
https://wordpress.org/support/view/theme-reviews/interface
We really appreciate your rating.

Thank you!