Sidebar on left on archive template

In the child theme example please look for: Tip52b – Change site layout (position of sidebar) for normal view

You will see several example of code, like:

.content-area {
	float: right;
	width: 65.104166667%;
}
.site-content .widget-area {
	float: left;
	width: 30.5%;
}

So you can use it to change layout across the site and if you are targeting specific category, you can append cat or other taxonomy class name, like:

.you-cat-class .content-area {
	float: right;
	width: 65.104166667%;
}
.you-cat-class .site-content .widget-area {
	float: left;
	width: 30.5%;
}

This code should be used in the media query if you will use it in child’s style.css or in the custom CSS plugin:

@media screen and (min-width: 783px) {

...

}

• This reply was modified 7 years, 10 months ago by Tomas Mackevicius.
• This reply was modified 7 years, 10 months ago by bdbrown.

Thanks for that. Does this also fix the order in which the screen reader reads the elements?

Cheers

I never read anywhere that current order is bad. This doesn’t change structure, just the appearance.

Nope absolutely not. Our client would like the sidebar on the left, but we’ve found out that it’s a WCAG requirement for the visual order to match the DOM order. https://www.w3.org/TR/WCAG20-TECHS/C27.html