How To Make Full-Width Text Areas Using Blox WP Plugin

Blox WP is a premium WordPress plugin that allows you to make structural changes to you WordPress website by placing specific content blocks within any structural component of your WordPress website including; the homepage, posts, archives, and pages.

A recent website project developed with the Genesis Framework, required full-width and unique text areas (headlines, and paragraph text) to be inserted on various pages. A screenshot of the about us page is displayed below.

The Blox were added to the page content via the shortcode add-on, however, the Blox would only fit to the container width of the existing content, not spanning the full-width of the screen. After searching for additional plugins, it was determined that what we needed to accomplish was feasible by adding some custom CSS. The code below was added to the custom CSS area within the custom Blox style area to achieve the full-width display. When using the code below, be sure to change your Blox id to match.


#blox_local_7755 {
max-width: none;
width: 100vw;
left: 50%;
margin-left: -50vw;
position: relative;
text-align: center;
}


#blox_local_7755 .blox-wrap {
max-width: 768px;
margin: 0 auto;
text-align: center;
}