Footer doesn't stack on mobile

[tobjsc]

I am looking after a Pro site that was built by another developer. I’m not familiar with Pro. Currently, the footer does not stack correctly on mobile. I have read a number of forum posts and tried various differecnt CSS suggestions but nothing makes any difference. I’m wasting time searching for a solution that I’m a bit surprised doesn’t work out of the box. Any help would be appreciated.

[tristup]

Hi Andrew,

Thanks for reaching out.
It will be very difficult to recognize the problem without investigating your website. Can you please share the website URL and if it is required login to access, please provide the login credentials for your site in a secure note to examine it, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[tobjsc]

Thanks for your response. I have saved the information to a secure note as requested.

[marc_a]

Hi Andrew,

Thanks for sharing all your information, please check the workaround below on how you can address your issue.

1.) First Solution is using the Hide During Breakpoint option:

• https://theme.co/docs/hide-or-show-content-by-device-size

In that option, it is advisable to duplicate your widget container in your footer builder.

Then after duplicating the widget container, rename it to something like (mobile widget) and the other one ( desktop widget).

Something like this one:

Then using the Hide During Breakdown method, set your mobile widget to only show on specific device size same goes with the desktop widget.

After you set up everything, on your mobile view settings change the flexbox settings to columns.

And that’s it, your mobile footer is now stacking correctly.

2.) The second option is using custom CSS. Please the code in your Widget Bar > Customize > Edit CSS.

@media(max-width: 767px) {
  $el {
  flex-direction: column !important;
}
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

FYI: On the upcoming release this option could be easier to do because we can easily adjust the option using the builder settings on the mobile view.

Hope that helps.

Thank you.

[tobjsc]

Many thanks for such a detailed and helpful response. I will give these a try.

[marc_a]

Hi Andrew,

You’re welcome and it’s our pleasure to help you! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.