askdesign
5/26/2017 - 1:52 AM

Add 4 Responsive Widgets Side by Side in Genesis - MODIFIED for ASK Design April 3, 2013 by Brad Dalton

April 3, 2013 by Brad Dalton

/** FOUR WIDGET AREAS above blog archives **/
/** Register sub widget areas */
/** I registered 2 more widget areas for a total of 4 */
/** I also added the 'after' code in the action section */

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-left2',
	'name'			=> __( 'Sub Widget Left 2', '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' )
) );
genesis_register_sidebar( array(
	'id'				=> 'sub-widget-right2',
	'name'			=> __( 'Sub Widget Right 2', 'child' ),
	'description'	=> __( 'This is the sub widget right section.', 'child' )
) );


/** Add the sub widget section */
/** Must group the 4 sub-widgets inside parentheses after is_home() && */
add_action( 'genesis_before_content', 'wpsites_sub_widget', 5 );
function wpsites_sub_widget() {
	if ( is_home() && (is_active_sidebar( 'sub-widget-left' ) || is_active_sidebar( 'sub-widget-left2' ) || is_active_sidebar( 'sub-widget-right' ) || is_active_sidebar( 'sub-widget-right2' ) ) ) {
		echo '<div id="sub-widget"><div class="wrap">';
		
		   genesis_widget_area( 'sub-widget-left', array(
		       'before' => '<div class="sub-widget-left">',
 	         'after'	 => '</div>',
		   ) );
    
		   genesis_widget_area( 'sub-widget-left2', array(
		       'before' => '<div class="sub-widget-left2">',
 	         'after'	 => '</div>',
		   ) );
	
		   genesis_widget_area( 'sub-widget-right', array(
		       'before' => '<div class="sub-widget-right">',
         	'after'  => '</div>',
		   ) );
	
		   genesis_widget_area( 'sub-widget-right2', array(
		       'before' => '<div class="sub-widget-right2">',
         	'after'  => '</div>',
		   ) );
	
		echo '</div><!-- end .wrap --></div><!-- end #sub-widget -->';	
	}
}
/* Sub Widgets
------------------------------------------------------------ */

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

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

#sub-widget a,
#sub-widget a:visited {
}

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

.sub-widget-left, .sub-widget-left2, .sub-widget-right {
    float: left;
    width: 23.076923076923077%;
    margin-left: 2.564102564102564%;
}

.sub-widget-left {
    clear: both;
    margin-left: 0;
}

.sub-widget-right2 {
  	float: right;
    width: 23.076923076923077%;
    margin-left: 2.564102564102564%;
}

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

@media only screen and (max-width: 1200px) {
/* no need for these 
.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%;
}