Make Four Column Row Two Columns on Mobile

Hello,

You can click on the cogwheel on the left side of the footer row you want to edit. The Layout options let you set a layout for desktop, tablet, and mobile devices. Click on the mobile icon and change the layout to the 2×2 option.

There’s no footer bottom on my theme. Also i’m taking about the Customizing ? Posts/Pages Layout ?Archive Layout.

Post Archive Columns for homepage for desktop is 4 columns, but there’s no way to set column for mobile.

Please note, i’m using the free version of kadence theme.

• This reply was modified 1 year, 12 months ago by gw808092.

Hi @gw808092,

Try adding this to your custom css:

@media screen and (min-width: 720px) and (max-width: 1024px) {
.site-footer-row-container-inner .site-footer-row.site-footer-row-tablet-column-layout-default, .site-footer-row-container-inner .site-footer-row.site-footer-row-tablet-column-layout-row {
grid-template-columns: 2fr 2fr;
}
}

Hope that helps!

Hannah

Thank you @hannahritner , I added the code, but nothing happen. It remains the same. Still one column on mobile.

Hi there.

I’m sorry for the delay in getting back to you.

Add this instead:

@media screen and (max-width: 767px) {
    #archive-container {
        grid-template-columns: 1fr 1fr;
    }
}

I hope this works for you. Let us know if we can help you further.

Regards,
Karla

Thank you so much.

We are almost there, just a little more adjustment I guess.

The above screenshot is from iPhone 11.

Okay all. Thanks for your time. I manage to figure it out. I added justify-content: center to the CSS and everything is fine now.

So here’s the final CSS code for those that’ll need it

@media screen and (max-width: 767px) {
#archive-container {
grid-template-columns: 1fr 1fr;
justify-content: center
}
}

@gw808092 glad you were able to sort this! Let us know if there’s anything else we can help you with.

Best,

Hannah

Thank you.