Change the width of sidebar and main content, title in the middle of the page

1. You can adjust the width of the main content and the sidebar on that page using this CSS:

@media (min-width: 992px) {
.term-407 .main {
    width: 70%;
}
.term-407 .kad-sidebar {
    width: 30%;
    padding-top: 40px
   }
}

Just place the code into Theme Options> Advanced Settings and adjust the width percentages to whatever you want.

2. You can adjust the padding-top amount in the above CSS to lower the sidebar.

3. I’m not really aware of a way to get the title to span across the entire screen, but I’m sure it can be done through use of a child theme. Here is some CSS that will at least center it above the main content though:

.term-407 h1.page-title {
    text-align: center;
}

Does that work for you?

-Kevin

Thank you Kevin, it works great.

Could you please explain to me how I can center the title using a child theme? Do you mean editing the php code?

Thanks a lot
Ewelina

One more question: the code from the first point – how to make it work on every category page?

Thanks
Ewelina

3. I unfortunately don’t know how to accomplish that, but I’ll send this on to the theme developer so that he can provide some feedback. From the looks of it right now though, the title appears to be centered.

4.

@media (min-width: 992px) {
.tax-product_cat .main {
    width: 70%;
}
.tax-product_cat .kad-sidebar {
    width: 30%;
    padding-top: 40px
   }
}

-Kevin

• This reply was modified 7 years, 4 months ago by Kevin.

3. It is generally centered, I’m using this code:

.page-title {
text-align: center;
}

But if you go on the category page, where is a sidebar on the left, the title is centered in the main content area, so slightly moves to the right:
https://www.monya.shop/en/product-category/coats/navy-blue-coat/

4. The code works great. Thank you!

Ewelina

Hey, so in your child theme it sounds like you need to add this to your child theme functions.php file:

add_filter('woocommerce_show_page_title', 'custom_turn_off_pagetitle');
function custom_turn_off_pagetitle() {
	return false;
}
add_action('kt_afterheader', 'add_custom_title'); 
function add_custom_title() {
	if(class_exists('woocommerce')){
		if(is_shop() || is_product_category() || is_product_tag()){
		?>
		<div id="pageheader" class="titleclass">
			<div class="container">
				<div class="page-header">
					<?php woocommerce_catalog_ordering(); ?>
					<h1 class="page-title"><?php woocommerce_page_title(); ?></h1>
					<?php woocommerce_result_count(); ?>
				</div>
			</div>
		</div>
<?php 	}
	}
}

Ben
Kadence Themes

Thank you Ben, it works, but like you see on this page:

https://www.monya.shop/en/product-category/coats/

sort options moves it in to the left.
I wonder if it’s possible to center also the category description on the whole page? Sort options would be perfect to put under the description.

Thanks
Ewelina

Try this CSS in Theme Options> Advanced Settings and let me know if it works for you:

select.orderby.hasCustomSelect {
    width: 100% !important;
    text-align: center;
}

form.woocommerce-ordering {
    text-align: center;
    float: none;
    margin-right: auto;
    margin-left: auto;
    top: 78px;
}

-Kevin

Thanks Kevin. I didn’t mean to centre the sort option. I am sorry, I did not express myself very clearly. But at this point I have decided to stop make changes here.

Thank you for all the help!
Ewelina