Footer acting strange on chrome mobile

Support
#1

Hi there,

The footer I am building in Pro footer builder appears squished together/messed up when viewing on Chrome Mobile. I have tried on multiple devices (android phones, ipads) and the problem is persistent. It looks perfectly fine in Morzilla. You can see screenshots of the problem here and here.

What could be causing this?

Thank you,

Joshua

#2

Hi Joshua,

To fix this overflap issue, please add the top margin to your second container, 120px should be good:

Hope it helps :slight_smile:

#3

Hi, thanks for that. But there are still a few issues with it.

The “Subscribe” headline at the very top is missing (you can see it on desktop), and the “donate” button at the bottom is cut off. I’m viewing from my iPad.

#4

Hi @SeekGod,

It’s because of this custom CSS:

.accent.x-text-headline {
    overflow: hidden;
}

Please change it to:

.accent.x-text-headline .x-text-content-text {
    overflow: hidden;
}

Can you please try changing the height of button to 40px?

Let us know how it goes!

#5

Hi @Thai,

Thank you, I believe those issues are resolved, but I’m still having trouble… :confused:

One issue is that the height of the containers is not adjusting according to the height of the content. In my second container I have a shortcode that generates random quotes. Some quotes are long and some are short. The height of the container is not adjusting like it should… Can’t figure out why.

#6

And this issue also explains why the “Donate” button at the bottom is being cut off. The more content I put in the container the more it moves down and thus the more it is cut off. Really weird

#7

Ok, nevermind.

I finally figured out the reason for ALL the strange issues I was having. The containers were set to “Custom Flex” instead of “Standard” :weary: I had initially started out with a Pro footer template from Design Cloud and thus the setting.

Wish I would have known this earlier. Would have saved me hours.

#8

Hi @SeekGod,

Please add a bottom padding to the Content Area that contains the bible quote by adding this code to the Element CSS:

$el {
  padding-bottom: 30px;
}

$el .qm_quote span {
  display: block;
}

Hope this helps.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.