The Dynamik Website Builder (DWB), a Genesis child theme and child theme builder, allows you to build customized website layouts. Want to create quickly a full-width and responsive, single page website site or landing page? DWB’s EZ Homepage menu can do 95% that for you. With just a few mouse clicks, you’ll have a fully widgetized page ready for images, text, and sliders.

The EZ Homepage feature has only one minor drawback — it doesn’t have any ‘one-click’ settings to make the entire page full-width. This article will show you how to overcome that deficiency with just a few mouse clicks and some snippets of CSS.

By default, DWB is set to display a fluid design. The header, footer, as well as the primary and secondary navbars, will fill the entire width of the viewport. However, the content area, including any background color or image, is constrained by the settings in the theme’s stylesheet, as illustrated below.

I’m going to quickly walk you through the setup of this page, then provide you with the custom CSS to address the content / widget area. Our final page view will look like this:

I’m going to assume you have already designed your header, so we’ll start in the in the Dashboard and navigate to Genesis / Dynamik Design / EZ.

The EZ Menu is divided into four areas:

• Static Homepage EZ-Widget Areas
• Homepage EZ-Widget Area Extras
• Feature Top EZ-Widget Areas (full-width by default, this is the red section feature two widgets. One containing text, the other an image)
• Fat Footer EZ-Widget Areas (full width by default. For this example I opted for three widget areas)

The Static Hompage EZ-Widget Area is our concern. For this example, I opted for a 3–2–3 configuration. This means three widgets are created for the top container of the home page widget area, two widgets for the middle container, and three more for the bottom container. By default, DWB constrains the width of this area to 1100px.

To illustrate, what each of the following code snippets do, set the EZ Home BG color to C9ABAB. It’s not pretty but it will work.

Now navigate to Genesis / Dynamik Custom / CSS. This is where you’ll paste your new CSS.

First, we’ll add a background color to each of the three container areas. Copy and paste the following code in the CSS block.  Save it and view the page.

#ez-home-top-container {
	background: #7C92A1;
}
#ez-home-middle-container {
	background: #426278;
}
#ez-home-bottom-container {
	background: #B4C1C9;
}

Still not very pretty , but we’ll take care of that.

Next, copy and paste this code.  Save it and view the page again.

.ez-home .site-inner {
  	max-width: 100%;
	padding-bottom: 0 !important;
}
.ez-home-wrap {
	max-width: 1100px;
	margin: 0 auto;
}

Now we’re seeing progress. The content area now has a full-width background, though the individual containers are still wrapped in a padding. Let's eliminate that. Copy and paste the following and hit save:

#home-hook-wrap {
  padding: 0;
}

Now we have eliminated the padding of that outer wrapper, technically it’s the ‘home-hook-wrap’, and we have a true full-width sections for our page.

Our last step is to eliminate the margins between our container areas and add some padding to them to visually separate them for a more pleasing look. Copy and paste the following, hit save and view your page:

.ez-home-container-area {
	margin: 0;
	padding: 40px 20px 50px 20px;
}

And that completes our page – completely full width and responsive. You can add or subtract the number of widgets or containers you want through the EZ menu.

Additional styling for the individual containers (top, bottom, middle) must be added in the Custom CSS menu since the EZ menu edits styles for the entire widget area, which holds all 3 container containers.

To get a consolidated version of the CSS snippets click here.

See the whole process from start to finish in this video: