SPPB – Helix Ultimate, Joomla article integration full width

SP page builder is maybe the best Joomla PB, and you can integrate it during a Joomla article creation. A question is how to make the SPPB content to be full width. Copying the code below, and tweak it to your needs will resolve this issue.
As it is works fine with SPPB + Helix Ultimate.

/** SPPB - Helix Ultimate, Joomla article integration full width **/
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
	margin: auto;
}
@media (min-width: 1400px) {
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
	max-width: 1320px !important;
	}
}
@media (min-width: 1200px) {
.sp-page-builder.sppb-article-page-wrapper {
	margin: 0 -21vw !important;
	}
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
	max-width: 1140px;
	}
}
@media (max-width: 1200px) {
.sp-page-builder.sppb-article-page-wrapper {
	margin: 0 -10vw !important;
	}
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
	max-width: 960px;
	}
}
@media (max-width: 991px) {
.sp-page-builder.sppb-article-page-wrapper {
	margin: 0 -16vw !important;
	}
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
	max-width: 720px;
	}
}
@media (max-width: 767px) {
.sp-page-builder.sppb-article-page-wrapper {
	margin: 0 -17vw !important;
	}
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
	max-width: 540px;
	}
}
@media (max-width: 575px) {
.sp-page-builder.sppb-article-page-wrapper {
	margin: 0 -30px !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
}
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
	max-width: 100%;
	}
}

For screens larger than 1920px a complete solution, that covers all screen resolutions is below:

/* SPPB - Helix Ultimate, Joomla article integration full width */
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
	margin: auto;
}
.sp-page-builder.sppb-article-page-wrapper {
	margin-left: calc(-100vw / 2 + 1290px / 2);
	margin-right: calc(-100vw / 2 + 1290px / 2);
	}

.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
	max-width: 1320px;
	}

@media screen and (max-width: 1399px) and (min-width: 1200px) {
.sp-page-builder.sppb-article-page-wrapper {
	margin-left: calc(-100vw / 2 + 1110px / 2);
	margin-right: calc(-100vw / 2 + 1110px / 2);
	}
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
	max-width: 1140px;
	}
}

@media screen and (max-width: 1199px) and (min-width: 992px) {
.sp-page-builder.sppb-article-page-wrapper {
	margin-left: calc(-100vw / 2 + 930px / 2);
	margin-right: calc(-100vw / 2 + 930px / 2);
	}
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
	max-width: 960px;
	}
}
@media screen and (max-width: 991px) and (min-width: 768px) {
.sp-page-builder.sppb-article-page-wrapper {
	margin-left: calc(-100vw / 2 + 690px / 2);
	margin-right: calc(-100vw / 2 + 690px / 2);
	}
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
	max-width: 720px;
	}
}
@media screen and (max-width: 767px) and (min-width: 576px) {
.sp-page-builder.sppb-article-page-wrapper {
	margin-left: calc(-100vw / 2 + 510px / 2);
	margin-right: calc(-100vw / 2 + 510px / 2);
	}
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
	max-width: 540px;
	}
}
@media (max-width: 575px) {
.sp-page-builder.sppb-article-page-wrapper {
	margin: 0 -15px;
	width: auto;
	}
.sp-page-builder.sppb-article-page-wrapper .sppb-row-container {
	max-width: 100%;
	}
}
Scroll to Top