[Support request] offset for columns in footer

Home Forums Support offset for columns in footer

This topic contains 6 replies, has 2 voices, and was last updated by  JBD 3 days, 3 hours ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1007214

    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?

    #1007613

    David Customer Support

    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?

    #1008509

    JBD

    Last in stack preferably (no offsets)

    #1008795

    David Customer Support

    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.

    #1009004

    JBD

    Tricky one.
    The layout I’m trying to get is

    Can you tell me how I can specify mobile-grid-50 on widgets?

    #1009011

    David Customer Support

    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.

    #1009448

    JBD

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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.