Mobile Footer Looks "Off"

Support
#1

I’m not sure how I fix this, but the footer on my site when viewing from a mobile device is a bit misformatted. Any suggestions on how I fix this?

www.whitneymorgan.photography/wp

#2

Hi there,

Please add this code in the custom CSS:

.x-colophon .fm1.x-bar {
    display: block;
}

.x-colophon .fm1.x-bar-content {
    display: block;
}

.x-colophon .fm3.x-image {
    margin: 0 auto 20px;
}

.x-colophon .fm1.x-bar {
    padding-top: 0;
}

Hope this helps.

#3

I added that to my CSS and it seemed to mess my footer up even more. I added to the page below so you can see what it did to my site.

#4

Hi there,

Please update the code to:

@media (max-width: 480px) {
    .x-colophon .fm1.x-bar {
        display: block;
    }

    .x-colophon .fm1.x-bar-content {
        display: block;
    }

    .x-colophon .fm3.x-image {
        margin: 0 auto 20px;
    }

    .x-colophon .fm1.x-bar {
        padding-top: 0;
    }
}

Hope this helps.

#5

Thanks! It’s still a little weird on mobile though. Is there anyway to just get rid of that gray space at the bottom of the mobile site? It seems to go through the footer menu and split it in two (white on top and gray on the bottom)

#6

Your footer bar has a height of 30px

Would you mind giving us access to your WordPress admin in a secure note so we could check your footer setup? Or, check your footer bar settings if you’ve set the height to 30px.

Thanks.

#7

Sure! Sounds good

#8

Hello There,

Thanks for providing the information. I am not seeing a gray bar. When I check it, this is all I see: http://prntscr.com/fs7u5d

By the way, the footer has a default height of 30 pixels which may not look good in smaller screens. To resolve this issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 767px){
  body .fm1.x-bar.x-bar-footer {
    height: auto !important;
  }    
}

Please let us know how it goes.

#9

That’s an OK solution and I guess it would work, but I really would like to keep the menu visible without that gray bar at the bottom

#10

Hi,

You can make use of the visibility feature. https://www.screencast.com/t/g3xVGX0e9

You may add another element, for example add navigation collapse.

Then set you navigation inline to be hidden in mobile and set your newly added navigation collapse to be visible in mobile.

Hope that makes sense.

#11

I think I figured it out so it looks nice.

My only other question is how do I change the icons that are beside each menu item. They are all fingers are the moment, but I want to customize each one. Any suggestions?

#12

Hi there,

You can change those by going to Appearance > Menus section. For more information please kindly read the menu section of the popular questions below:

https://theme.co/apex/forum/t/popular-questions/204

Thank you.

#13

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