[Support request] offset for columns in footer

[JBD]

I’d like to add an extra 6th widget to the footer, is this possible?

I’d then like to add a css offset so that its position is on a second row from the original 5 widget columns, but it is offset by 1 column so that it sits directly under widget column 2

Are there column offsets for the grid system in GP?

[David]

Hi there,

quick question where does this 6th offset column appear when in a single column on mobile? Will be the last in the stack or after the 2nd widget?

[JBD]

Last in stack preferably (no offsets)

[David]

Trying to avoid registering a whole new footer widget area.
Couple of choices:

1. This plugin, 3rd party developed for GP to add another row of widgets to the footer.
2. You use only one widget area and stack all of your widgets in a column (ie. mobile order) then we look at some CSS to make them into layout you’re looking for.

Let us know if you need help with the latter.

[JBD]

Tricky one.
The layout I’m trying to get is
[img]https://i.imgur.com/061mTvv.jpg[/img]
Can you tell me how I can specify mobile-grid-50 on widgets?

[David]

If each of your Widget areas are to only contain 1 widget then you can just stack all widgets in one Widget area, set the Layout to only display one and then use some CSS Grid like this:

.footer-widget-1 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[6];
    grid-template-columns: repeat(6, 1fr);
    -ms-grid-rows: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.footer-widget-1:before {
    display: none;
}

.footer-widget-1 aside:first-child {
    -ms-grid-column-span: 2;
    grid-column: span 2;
    -ms-grid-row-span: 2;
    grid-row: span 2;
}

Note: The Customizer > Additional CSS will throw errors at this code, you can just ignore them and check the warning box to save.

If that works for you then i can assist with the tablet / mobile layout. An image of that would be handy.

[JBD]

ok thanks, i’ll give this a go and get back to you

[Author]

Posts