Sela added widget area alignment issue

So I made a little progress by adding a class to the div section i added to the frontpage template. I added one called “subhero”. I then went to my Edit CSS and added this to the stylesheet:

.subhero {
	display: flex;
}

which now makes them all flex across the page horizontally… HOWEVER, they do not wrap as the screen size changes with smaller screens or portable devices… so is there a way to apply the wrapping that is defined above to this as screen size changes?

i totally just got this to work. I am posting the solution here in case anyone else ever needs it. i have seen many people ask for ways to add text or other things below the hero image and this can accomplish that too so many might find it useful.

This is to modify the frontpage template to 1. Add a widget area beneath the hero section and above the frontpage widget areas for three columns of widgets. These column areas appear under Appearance -> Widgets just as the frontpage widget columns appear. It essentially duplicates the look and functionality of the frontpage widget area.

1. create a child with the appropriate functions.php file.
2. Modify the functions.php file to add the following code. This will create the three widget areas and activate them for the appearance section:

/**
 * Register the subhero widgetized areas.
 *
 */
function arphabet_widgets_init() {

	register_sidebar( array(
		'name'          => 'Frontpage sub-hero area 1',
		'id'            => 'front-sub-hero1',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );

	register_sidebar( array(
		'name'          => 'Frontpage sub-hero area 2',
		'id'            => 'front-sub-hero2',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );

	register_sidebar( array(
		'name'          => 'Frontpage sub-hero area 3',
		'id'            => 'front-sub-hero3',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );

}
add_action( 'widgets_init', 'arphabet_widgets_init' );
?>

3. copy the front-page.php file to your child with the appropriate permissions so you can modify it
4. Modify the front-page.php file by adding the following. You want to add it after </div><!– #primary –> and before <?php get_sidebar( ‘front-page’ ); ?>. This will pull the three widget areas into the frontpage defined by a subhero class that we will style. At first they will run vertically and not in columns but we’ll fix that in the next step:

<div id="primary-subhero-sidebar" class="front-widget-area widget-area" role="complementary">

		<div id="primary-subhero-sidebar-1" class="subhero-1">
			<?php if ( is_active_sidebar( 'front-sub-hero1' ) ) : ?>
				<?php dynamic_sidebar( 'front-sub-hero1' ); ?>
			<?php endif; ?>
		</div><!-- #primary-subhero-sidebar-1 -->

		<div id="primary-subhero-sidebar-2" class="subhero-2">
			<?php if ( is_active_sidebar( 'front-sub-hero2' ) ) : ?>
				<?php dynamic_sidebar( 'front-sub-hero2' ); ?>
			<?php endif; ?>
		</div><!-- #primary-subhero-sidebar-2 -->

		<div id="primary-subhero-sidebar-3" class="subhero-3">
			<?php if ( is_active_sidebar( 'front-sub-hero3' ) ) : ?>
				<?php dynamic_sidebar( 'front-sub-hero3' ); ?>
			<?php endif; ?>
		</div><!-- #primary-subhero-sidebar-3 -->
	</div><!-- #primary-subhero-sidebar -->

5. Style the three widget areas into columns to match the frontpage area below them. Do this by going to Edit CSS to add code to the stylesheet (style.css). Add this code:

/* Front Page subhero Widget Area */
@media screen and (min-width: 768px) {
	.subhero-1 {
		float: left;
		width: 30%;
		margin-right: 5%;
	}

	.subhero-2 {
		float: left;
		width: 30%;
		margin-right: 5%;
	}

	.subhero-3 {
		float: right;
		width: 30%;
		margin-right: 0;
	}
}

That should style them just like the area below. And it also will allow them to run into one column as the screen size decreases at the same value the rest of the page does. So three columns when the area below is three columns, and one column when the area below is one column.

Note that I didn’t go the added step to make sure the columns resized if you didn’t use all three of the new widget columns. This layout is specifically for the use of all three at the same time.

You could easily modify what I have done with the CSS to change the number of areas and adjust the styling /layout accordingly just by changing the values etc. For example, for one column, just reduce the number of widgets you register (in the code above) in the functions.php to only one subhero widget area. Reduce the number of areas you pull in the frontpage.php to this one area. Then, change the style values to width 100% or whatever you want etc.

This way you could not only add a text area below the hero, but add any widget(s) below the hero.

Very proud of myself!

Just marking my own thread as resolved…

Glad you found a solution – and thanks a bunch for sharing it with other Sela users!