By default, widget area blocks are configured to accept four widgets horizontally. (Widget area blocks can be set to align vertically or horizontally. Vertical widget areas simply stack widgets on top of each other—check out the block options!).
Adding a Custom Class
Start by adding a custom class to your horizontally-aligned widget area. Pick anything you like; I like to use something sensible like “threecol” or “threecolwidget.”
Add Live CSS
Open Design Mode to access the Live CSS Editor.
The CSS we’ll want to add targets the list items within the unordered list that makes up the widget area. Each new widget you add is a separate list item, so we want to fit three of these horizontally (instead of four).
.block-type-widget-area.threecol .horizontal-sidebar li.widget {
width: 33%;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} And that’s it!
This article was last updated for Headway version 3.8.3
