Footer columns overlapping

Hello, I’m having trouble making the columns in the footer responsive. The footer has 2 rows (what you call bars), each with 4 columns. They are fine in desktop view, but in mobile, the column text either overlaps or gets cut off on the left and right sides as in the screen captures:
and

The only documentation I could find was an article: https://theme.co/apex/forum/t/footer-containers-overlapping/1507 but the person never offered their website’s URL. Please help!

Hi,

You can create another bar and design it as how you would like it to look in mobile.
Then set it to be only visible in mobile and hideyour first bar in mobile.

Thanks

Perhaps it’s a silly question, but I have each column set as Text and Headlines (not as Containers – which have the Show/Hide options underneath)… where can I access the show/hide for mobile?

Hi There,

On The Header and Footer Builders , every element, bar and container has a customize tab. On that that of each element you can find this option.

Hope it helps

Oh wow, the interface is convoluted and not so easy to find. Thanks for the explanation @Joao that helped! :slight_smile: Attached is a screen capture to ease the process for others in future when trying to find the same. Cheers.

Another similar but related question: the heading (Contact Us) is overlapping with the text element (map icon) in the footer. Here’s a screen capture:

How can I get rid of this?
(Should this be a separate question on the forum? The login details are provided in a previous private msg above in case you need it. You’ll notice 2 “Contact Us” bars; the 2nd one at the bottom is a duplicate for backup reasons.) Thanks.

Hi,

The login provided no longer works.

Kindly check again and let us know.

You can hide that container in mobile then create another one that is full width.

That way it will show on top without overlapping,

Thanks

Thanks Paul. I actually fixed this by increasing the height of the footer. Cheers. :slight_smile:

Glad to hear that. :slight_smile: