[Resolved] Overriding content area Unsemantic CSS classes

[Han]

Hello team!

In my archive page with left sidebar, I have the following css classes added to it:

<div id="primary" class="content-area grid-parent mobile-grid-100 push-25 grid-75 tablet-push-0 tablet-grid-100">

On tablet, this causes the content area to have a width of 75%. But I would like to stretch it to 100%.

Upon digging through the theme’s markup.php, I found a filter that allows me to change the class value – generate_left_sidebar_tablet_width – and this was what I came up with:

add_filter( 'generate_left_sidebar_tablet_width', function($width) {
	if ( is_archive ) {
		$width = 0;
		return $width;
	}

	return $width;
});

and it works great. However, I’m thinking if this is the best and recommended way to solve the problem? Or should I just change the width and other styles using CSS?

Personally I feel that using filters seem less ‘hacky’ and it doesn’t mess up the default styling.

Appreciate any input!

Ed

[Tom]

That filter is great – it means you don’t need to add any additional CSS to your page.

You can also use 100 instead of 0 🙂

[Han]

Hello Tom,

Cool. Thanks a lot for the speedy reply and helpful information!

Ed

[Tom]

You’re welcome! 🙂

[Author]

Posts