Styling sidebars Whitespace Pro

style.css

/* Sidebar
---------------------------------------------------------------------------------------------------- */
.content-sidebar .content,
.sidebar-content .content {
	width: 100%;
}

.content-sidebar .sidebar-primary,
.sidebar-content .sidebar-primary {
	width: 100%;
}

.content-sidebar .content,
.sidebar-content .content {
	border: none;
}

@media only screen and (min-width: 800px) {
	.content-sidebar .content,
	.sidebar-content .content {
		width: 72.09433962264151%;
	}

	.content-sidebar .content {
		border-right: 1px solid #e2e2e2;
		float: left;
	}

	.sidebar-content .content {
		border-left: 1px solid #e2e2e2;
		float: right;
	}

	.content-sidebar .sidebar-primary,
	.sidebar-content .sidebar-primary {
		width: 26.96226441509434%;
		padding: 100px 0;
	}

	.content-sidebar .sidebar-primary {
		float: right;
	}

	.sidebar-content .sidebar-primary{
		float: left;
	}

	.sidebar-primary .widget {
	  padding: 0 40px
	}

	.sidebar-primary h4.widgettitle {
	  color: #222;
	  font-size: 24px;
	}
}