Mobile Footer 2 columns

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;
    }
}

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?

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%;
    }
}

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?

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

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.

Edited the code above to adjust the widget :)

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

Awesome. glad i could help

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?

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

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

yep that fixed it. thanks again!

You're welcome