[jen.lynn.owen]

On my business homepage, I have a set of 5 service widgets to describe the subjects that we tutor. This is an awkward number of services when each line is 4 services wide when viewed on a computer. Is there a way to centre the columns to improve the appearance of this? I’d love to be able to put 3 services on one line and two on the next line, with both lines centered.

I’ve already made a child theme and child widget and have edited the php a little bit, so I’m comfortable doing that but am not fluent in php or html. Assuming that I need to edit the php to create the look that I described, could you provide me with the line changes that I need to make?

Here is my website, where you can see the awkward alignment of the columns: http://www.owentutoring.com

Thank you!

[Theme Horse Support Team]

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!

[jen.lynn.owen]

Hello,

Thank you for this code. This succeeded in created 3 widget columns instead of 4, but it doesn’t not help me achieve a centred look. Now my lines with 2 widgets only look uncentered. Is there a way to simply centre everything?

[Theme Horse Support Team]

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!

[jen.lynn.owen]

This doesn’t solve my original question. Do you have any solutions that can address what I originally asked: I’d love to be able to put 3 services on one line and two on the next line, with both lines centered.

[Theme Horse Support Team]

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!

[jen.lynn.owen]

I’ve got it set up now as you requested on my main page here: http://owentutoring.com/

Note that because I use the widget in two places on the main page, I am now using 3 instances of the widget (twice for the course subject listings and once for the Services listing below it). It would be great if the CSS could fix the centering on both sets of the 2 item lines (the Chemistry/Biology line and the Private/Group tutoring line). Thank you again for the help.

[Theme Horse Support Team]

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!

[jen.lynn.owen]

Thank you, this does successfully centre the 2 service lines, but now the width of their text line is wider than the other services. Is there a way to limit the width of the text? http://www.owentutoring.com

[Theme Horse Support Team]

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!

[jen.lynn.owen]

Thank you, this is the effect that I was looking for. I really appreciate your help.

[Theme Horse Support Team]

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!

[Author]

Posts