Footer Not Resizing

Hi, I made a custom footer and looks fine in larger resolutions but in mobile it doesn’t resemble the footer at all. Is there a CSS I can add to make it respond normally? pinnacleautocare.com

thank you!

Hi there,

As I see you are using the Pro Footer Builder. I suggest that you check our video here to know how to work with the Footer in a way that it will be suitable for the mobile:

I also suggest that you make use of the Hide During Breakpoints feature to have mobile specific stuff in your footer.

Thank you.

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

@media (max-width: 979px){
    .fm1.x-bar-content {
        flex-direction: column;
        height: auto !important;
    }
    .fm1.x-bar {
        height: auto !important;
        padding: 45px 0;
    }
}

Hope it helps :slight_smile:

@christopher.amirian @thai thank you guys for the help!

I went through the video but it still did not get into the specifics that i needed to for my problem. The CSS code that you gave me worked perfectly but I don’t know what happened but now my header menu is displaying as it would in a regular resolution screen on mobile. Before there used to be just a little square box with 3 lines that said menu next to it. Can you guys help me out on how to get the header menu back to that?

thank you!

Hello There,

The header was affected by the css code. Please update the css code and use this:

@media (max-width: 979px){
    . x-colophon .fm1.x-bar-content {
        flex-direction: column;
        height: auto !important;
    }
    . x-colophon .fm1.x-bar {
        height: auto !important;
        padding: 45px 0;
    }
}

This code will ensure that this should only be applied to the footer.

Hope this helps. Kindly let us know.

Hi @RueNel that line of CSS you gave me did not work for me. And I was saying that the header menu icon with the 3 lines does not show when minimized. I tried creating a navigation collapsed in the builder but it did not function properly. I attached a pic of how my menu looks when in mobile (squished).

Anything you guys can do is really appreciated!

thank you

Hi there,

I don’t see any footer in your screenshot. The above CSS is for footer but looks like what you’re referring is a header. Please add two menu items, the inline menu element and navigation dropdown element. Inspect your inline menu element and go to Customize section and hide it from mobile through Hide During Break Points option. Then with same option, hide your navigation dropdown element from the desktop.

The dropdown element is just a sample, you can choose any menu of your like (except inline menu since it’s default use is for desktop).

Thanks!

Hi @Rad, I chose the nav collapse element but it does not function properly. In the fist picture, I took of my website in the google chrome browser. As you can see the element is just kind of floating in the middle of the page. I thought I had to make all bars sticky but that did not help.

Most importantly. n the second picture, none of the changes/additions I made show up on my iPhone. I already looked at all the customizer settings and everything is fine there.

thank you

Hello There,

Looking at your menu items, there isn’t enough space for the menu items to display. You will need navigation collapse element, hide it on desktop screens and make sure that it is only visible in smaller screens. You can do this by using the “hide during breakpoints” options. For more details about this option, please check this out:

Hope this make sense.

@RueNel I’ve done all that but none of the changes are reflected beyond corner stone.

Hi there,

I don’t see any of that changes, It still how it was the last time I checked it. Have you cleared your Humming Bird’s cache? Please disable any caching in your site since you’re in the middle of development :slight_smile:

Caches are only useful in the production mode (after development).

Thanks!

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