6.3. How to Create a Full Width Widget Area

Another thing we can easily do with flex, is to expand the two widgets areas to a full width, which will allow us to use the Group Blocks (or Columns Block if you wish) to have more control over our final design.

Before and After

To reproduce this design, these are widgets that have been added:

Developer Tools

If you recall, the third main element of the theme (div.footer-nav-widgets-wrapper) holds two elements; one of them is the aside area (aside.footer-widgets-outer-wrapper); this element, as we can see, has a div.footer-widgets-wrapper holding the two widget areas we know from the theme’s settings:

  • #Footer 1, is .footer-widgets.column-one
  • #Footer 2, is .footer-widgets.column-two

Step 1: Expanding the Width

Since div.footer-widgets-wrapper is a flex element, all we need is to do two things basically:

  1. declare a new property and value, (flex-direction:column; in this case) so that #Footer1 and #Footer2 appear one above the other
  2. expand the original 50% width of those areas to a 100%
/*------------------------------- 
 Footer Widgets Areas
--------------------------------*/
/* 01 Changing the Layout */
.footer-widgets-wrapper {
	flex-direction:column;
	margin:auto;
}

.footer-widgets {
	width:100%;
	margin:auto;
	padding:2rem;
}

Easy, right?

Step 2: Adding Blocks

As you add the blocks mentioned above, you’ll see they need a lot of CSS to look good; with this second group of snippets, you’ll get the final result.

Please note: We begin first writing for mobile devices; then at the end, we turn the content of the group block into rows for bigger devices.

/* 02 Blocks */
.footer-widgets .widget {
	margin-top:0;
}


.footer-widgets .wp-widget-group__inner-blocks {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:flex-start;
	border-bottom:1px solid #ddd;
}

.footer-widgets h2.widget-title {
	font-size:2rem;
	margin-bottom:0;
}

.footer-widgets .wp-widget-group__inner-blocks ul.wp-block-latest-posts.is-grid {
	margin-top:1rem;
	min-width:100%; /* depending on your posts you may need this*/
}

.footer-widgets .wp-block-latest-posts.is-grid li {
	font-size:1.8rem;
	margin-top:0;
	border:none;
}

.footer-widgets .wp-block-social-links:not(.is-style-logos-only) li {
	margin-top:0;
	background-color:#000;
}

.footer-widgets a {
	color:#333;
}

@media (min-width: 599px) {
.footer-widgets .wp-widget-group__inner-blocks {
	flex-direction:row;
}
}

Laly York. Neurodivergent Gen-X writer / B.Ed. / Lawyer. Writing, coding and taking pics. From Jupiter, living in a soap opera; flying on the web with three blogs.

JOIN COMMENTS

Any thoughts?