Footer on Mobile

Hi @mmk175,

Thank you for using Neve.

This is indeed the way the theme footer was designed, to show only one column on Mobile devices.

To achieve what you asked for you can add the following code to the Additional CSS editor within the Customizer.

@media (max-width: 960px) {
	footer .footer--row-inner .row {
    	grid-template-columns: 1fr 1fr 1fr;
	}
}

I hope this will help.

Regards,
Stefan

Hi @stefancotitosu

Thanks for this.

I just changed the footers content so I will change it again to view this code.

Thank for you your assitance.

Hi @stefancotitosu That code is giving me the desired result but unfortunately it doesn’t look very good. Even when reduced to two columns. I think it’s just because I have decided to included the the opening hours in the footer now from my original content when I asked the question.

After taking out your new css the footer doesn’t actually look too bad on mobile. The only issue is that when the columns are stacked on top of each other. the content at the bottom of column one is very close to the content at the top of column two etc.

I think adding would fix this but it would make it look strange on desktop.

If you can help with that it would be great but no worries either way. I appreciate your help this far and I am happy to close the query ??

Hi @mmk175,

Thank you for the update.

The space at the top and bottom of each footer column can be increased on Mobile devices by changing the value of the top and bottom padding for each widget area – https://vertis.d.pr/i/OqND0O.

The theme allows changing this value for Mobile devices only, therefore, it won’t affect the Desktop layout.

I hope this will help.

Hi @stefancotitosu

Thanks for getting back to me. I was actually just looking into something similar to your suggestion and your recent comment has answered my query.

Using your theme, I can click on desktop, mobile and tablet and individually edit how the theme displays within those devices, is that correct?

I assumed, maybe from working on old themes years ago, that this was purely to view how the site looked on different screen sizes after using a one sizes fits all method of editing the theme.

Thanks again for this. I will give it a review.

Do you provide additional CSS that I can add into plugins to make them appear one way on mobile vs desktop?

Hi @mmk175,

I’m glad to hear that showing how the padding options for the footer widget areas can vary by device was helpful.

We always try to help the theme users, even with CSS in some cases, if the request is specific enough and a short code snippet can solve the request. Sometimes, even complex layouts can be adapted as desired with CSS, however, a lot of code is overwritten, which is inefficient and hard to maintain.

Thank you for your time and for considering writing a review.

Regards,
Stefan