Archived topic
offset for columns in footer
6 replies · Started by JBD on September 11, 2019
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?
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?
Last in stack preferably (no offsets)
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.
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?
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.
ok thanks, i'll give this a go and get back to you
