Footer not reponsive

Support
#1

Hey there, my footer is not responsive. https://zerotoone.de/
Thanks for your help

#2

Hello @zerotoone.de,

Thanks for asking. :slight_smile:

Please add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    footer.x-colophon ul.e125-14.x-menu.x-menu-inline {
    width: 80%;
    display: flex;
}
}

Thanks.

#3

thank you, but why does this happen? which setting are wrong on my end?

still doesn’t work btw

#4

Hi there,

I’m confused too, what do you mean by it’s not responsive? Would you mind providing more details? Your footer elements are centered and responding okay.

Thanks!

#5

the inline menu is not responsive and get cut off on mobile devices

#6

Hello there,

Your menu settings are all okay. We just need to add few code customization just to achieve the best layout to look at, design-wise for your footer menu. Please update the code above to:

@media only screen and (max-width: 600px) {
    body {
       overflow-x: inherit !important;  
    }
    .e125-11.x-bar {
        z-index: 0 !important;
    }
    footer.x-colophon ul.e125-14.x-menu.x-menu-inline {
       width: 100% !important;
       display: inline !important;
    }
    .e125-1.x-bar-outer-spacers:before, .e125-4.x-bar-outer-spacers:before, 
    .e125-7.x-bar-outer-spacers:before, .e125-11.x-bar-outer-spacers:before {
        -webkit-flex-basis: 0 !important;
        flex-basis: 0 !important;
        width: 0 !important;
    }
    .x-menu-inline>li {
       width: 100% !important;
    }
    .e125-14.x-menu > li > .x-anchor .x-anchor-content {
       padding: 0 0.75em !important;
    }
}

Hope that helps.

#7

nothing changed :frowning:
I simply want the menu elements to be displayed on top of each other, when on mobile.
Why is this so complicated, this is basic feature that X had since the beginning and I had to change nothing, it simply worked

#8

Hi There,

Really sorry for the confusion!

Can you please try this CSS and let us know how this goes. Please remove all other CSS that given by other staff member and use this only.

@media only screen and (max-width: 600px) {
    footer.x-colophon ul.e125-14.x-menu.x-menu-inline {
    width: 90% !important;
    display: block !important;
}
   footer.x-colophon ul.e125-14.x-menu.x-menu-inline li {
    width: 100% !important;
    display: block !important;
  }
footer.x-colophon ul.e125-14.x-menu.x-menu-inline li a span {
  padding: 2px !important;
}
}

Thanks

#9

still nothing changed. What is wrong with this theme? this is an essential feature, there should be no problems like this! Its just a menu, never had those kind of problems in my life

#10

Hi There,

Thanks again for the update!

I can see the old CSS still there in your site.

Now I have added my CSS and it looks fine now!

Thanks

#11

thank you!

#12

You’re welcome

#13

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