Cacher is the code snippet organizer for pro developers

/* Sub Widgets
------------------------------------------------------------ */

#sub-widget {
	background-color: #ddd;
	clear: both;
	color: #333;
	font-size: 16px;
	margin: 0 auto;
	overflow: hidden;
	padding: 40px 0;
	width: 100%;
}

#sub-widget h4 {
	color: #333;
	font-size: 16px;
	font-weight: normal;
}

#sub-widget a,
#sub-widget a:visited {
	color: #6ab446;
}

#sub-widget p {
color: inherit;
font-size: inherit;
}

.sub-widget-left {
	float: left;
	width: 510px;
}

.sub-widget-right {
	float: right;
	width: 510px;
}

/* Responsive Design
------------------------------------------------------------ */

@media only screen and (max-width: 1200px) {

.sub-widget-right {
		width: 460px;
	}

.sub-widget-left {
		width: 460px;
	}

@media only screen and (max-width: 1023px) {

.sub-widget-left,
.sub-widget-right {
width: 100%;
}

/** Register sub widget areas */
/** You can change the hook and conditional tag based on your own needs. */
genesis_register_sidebar( array(
	'id'				=> 'sub-widget-left',
	'name'			=> __( 'Sub Widget Left', 'child' ),
	'description'	=> __( 'This is the sub widget left section.', 'child' )
) );
genesis_register_sidebar( array(
	'id'				=> 'sub-widget-right',
	'name'			=> __( 'Sub Widget Right', 'child' ),
	'description'	=> __( 'This is the sub widget right section.', 'child' )
) );


/** Add the sub widget section */
add_action( 'genesis_before_footer', 'wpsites_sub_widget', 5 );
function wpsites_sub_widget() {
	if ( is_active_sidebar( 'sub-widget-left' ) || is_active_sidebar( 'sub-widget-right' ) ) {
		echo '<div id="sub-widget"><div class="wrap">';
		
		   genesis_widget_area( 'sub-widget-left', array(
		       'before' => '<div class="sub-widget-left">'
/** missing the 'after' code: see my modified code for ASK design */
		   ) );
	
		   genesis_widget_area( 'sub-widget-right', array(
		       'before' => '<div class="sub-widget-right">'
		   ) );
	
		echo '</div><!-- end .wrap --></div><!-- end #sub-widget -->';	
	}
}

Some child themes already include 2 widgets side by side but they’re in a fixed location.

What if you want to change the location or your theme doesn’t include sub widgets?

You can add them anywhere there’s a hook using PHP and CSS code in your child themes files.

In this tutorial, i’ll show you how to add 2 responsive sub widgets, side by side in any Genesis child theme.

The widgets will be equal in width however you can easily change these values in the CSS code.

NOTE: I modified for 4 widgets in one row for ASK Design