By default the Enfold theme divides each footer widget area into an equal width. However, in some cases you may want one widget area wider or narrower than another. To adjust the width of your footer widget area columns just add the CSS styles below to your theme’s styles.css file and adjust the percentages accordingly.

For a footer with three columns:

#footer .flex_column:nth-child(1) {
    width: 24%;
    margin-left: 0;
}
#footer .flex_column:nth-child(2) {
    width: 21%;
    margin-left: 3%;
}
#footer .flex_column:nth-child(3) {
    width: 25%;
    margin-left: 3%;
}

For additional footer areas just duplicate one of the ID/Classes above and modify the :nth-child( ) attribute with a new number. So for a 5 column widget area you would need something like this (see below) to target the width of the 4th or 5th column accordingly.

#footer .flex_column:nth-child(4) {
    width: 15%;
    margin-left: 3%;
}
#footer .flex_column:nth-child(5) {
    width: 15%;
    margin-left: 3%;
}

Keep in mind that the column widths and margins must add up to no more than 100% if you want them to appear inline on the next to each other. If you exceed 100% the widget areas at the end will wrap below the first widget area. This can be helpful though, such as in applications where you want the first widget area to span full width. This might be used for something like a call to action line and button. In this case yoou could set the first flex column to 100% and then the space out the rest to fit on the same row (example below).

#footer .flex_column:nth-child(1) {
    width: 100%;
    margin-left: 0;
}
#footer .flex_column:nth-child(2) {
    width: 22%;
    margin-left: 3%;
}
#footer .flex_column:nth-child(3) {
    width: 22%;
    margin-left: 3%;
}

#footer .flex_column:nth-child(4) {
    width: 22%;
    margin-left: 3%;
}
#footer .flex_column:nth-child(5) {
    width: 22%;
    margin-left: 3%;
}

One other thing to consider is that the widths will translate to mobile devices as well so you may want to add media queries to adjust the widths as the screen size reduces. This would allow you to display two widget areas side by side or stack the widget areas if on much smaller devices (example below).

@media only screen and (max-width: 680px) {
     #footer .flex_column:nth-child(1),
     #footer .flex_column:nth-child(2),
     #footer .flex_column:nth-child(3),
     #footer .flex_column:nth-child(4),
     #footer .flex_column:nth-child(5) {
         width: 100%;
         margin-left: 0;
     }
}