Theme Setup - CSS Only

An alternative to creating a archive-listing.php and single-listing.php as discussed in Theme Setup is to use CSS. This solution is especially handy if there is no child theme in place. 

This is some simple CSS you can use to centre the listings on the Search Results pages. 

.epl-post-type-archive #sidebar,
.epl-single-listing #sidebar,
.epl-post-type-archive .widget-area.secondary,
.epl-single-listing .widget-area.secondary {
	display: none; /* Hide the sidebar but check the sidebar ID or class */
}
.epl-single-default,
.epl-archive-default {
	max-width: 1155px; /* Adjust Me based on theme max width */
	margin: 0 auto; /* Adjust Me based on theme max width */
	margin-top: 2em; /* Adjust Me based on theme max width */
}
@media screen and ( max-width: 1155px ) {  /* Adjust Me based on theme max width */
	.epl-single-default,
	.epl-archive-default {
		padding-left: 1em;  /* Adjust Me based on theme max width */
		padding-right: 1em;  /* Adjust Me based on theme max width */
	}
}

Before where listings are stretched to the browser edges:

After implementing the CSS

Note: This solution hides the Sidebar. It can be re-added also with CSS, however a bit more CSS will be involved as many themes are coded with sidebar/minimal sidebar support. It might be easer to do a full Theme Setup then to tackle sidebar positioning with CSS.

Uncommented CSS

.epl-post-type-archive #sidebar,
.epl-single-listing #sidebar,
.epl-post-type-archive .widget-area.secondary,
.epl-single-listing .widget-area.secondary {
	display: none;
}
.epl-single-default,
.epl-archive-default {
	max-width: 1155px;
	margin: 0 auto;
	margin-top: 2em;
}
@media screen and ( max-width: 1155px ) {
	.epl-single-default,
	.epl-archive-default {
		padding-left: 1em;
		padding-right: 1em;
	}
}

.epl-post-type-archive #sidebar, .epl-single-listing #sidebar, .epl-post-type-archive .widget-area.secondary, .epl-single-listing .widget-area.secondary { display: none; }

.epl-single-default, .epl-archive-default { max-width: 1155px; margin: 0 auto; margin-top: 2em; }

@media screen and ( max-width: 1155px ) { .epl-single-default, .epl-archive-default { padding-left: 1em; padding-right: 1em; } }

Astra CSS transpatent background


.epl-single-default .epl-listing-single.epl-property-single,
.epl-archive-default .epl-property-blog {
	background: transparent;
}

Related Articles