[Support request] Mobile Footer 2 columns

[ZZZ]

Hello there,

I need help on footer widgets. Was able to create 2 columns for tablet view but can’t seem to get it right for mobile view for the footer.

I want the same view for mobile as the tablet. 2 Columns.

can’t see this on website cause it’s in staging mode.

[David]

Hi there,

you can try this, but i think you will find that 2 columns on mobile may be a little too cramped:

@media (max-width:768px) {
    .inside-footer-widgets>div {
        float: left;
        width: 50%;
	clear: none;
    }
}

[ZZZ]

Great,

However, i would like widget 1 & 2 to be the same row, then 3 & 4 to start a 2nd row. how do i make this?

[David]

Lets try using Flex instead:

@media (max-width:768px) {
    .inside-footer-widgets {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .inside-footer-widgets>div {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    }
    .inside-footer-widgets>div:first-of-type {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
    }
}

@media (min-width:768px) {
    .inside-footer-widgets>div:first-of-type {
        display: none;
    }
    .inside-footer-widgets>div.grid-20 {
        width: 25%;
    }
}

[ZZZ]

great! it worked perfectly.

Now i would like to add 1 global widget for mobile but this 1st widget should be only in 1 column while the rest are in 2 column as per normal.

Is this possible? What’s the best way to do it?

[David]

I updated the code above to cover that. Increase footer widgets to five and put the mobile only widget in the first widget area.

[ZZZ]

It works on mobile now, thanks.

Sorry forgot to mention, I would like desktop view to remain looking with only 4 widgets.

At the moment it is looking with 5 widgets except with the 5th footer widget empty.

[David]

Edited the code above to adjust the widget 🙂

[ZZZ]

amazing! got what I wanted with crazy fast support! thanks a bunch!

[David]

Awesome. glad i could help

[ZZZ]

Hi Again,

Sorry I realised that the 5th widget is not showing on homepage but it is okay on the rest. Any way to fix this?

[David]

Can you check the Layout meta box in the page editor:

https://docs.generatepress.com/article/footer-widgets/

[ZZZ]

yep that fixed it. thanks again!

[David]

You’re welcome

[Author]

Posts