(Pro) Footer on mobile does not look good

[sasanp]

I upgraded to the PRO and set up my first footer. It looks great on my desktop layout, but on mobile devices it does not look great. It’s not centered and the spacing is way too much between the tabs. I tried cleaning it up but i found no solution.

[Prasant]

Hello Sasan,

Thanks for writing in!

You can use some media query to specifically target the elements on mobile devices. Please inspect the Inline Navigation element and under Customize > Setup > Class add class name.

After that add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  .mobile-class .x-anchor-content {
    padding: 10px 0 !important;
}
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[sasanp]

I tried to put into CSS theme option… but spacing between rows is still has a big gap.

[ruenel]

Hello Sasan,

Please understand that the navigation inline element is only best to use in desktop screens. For smaller screens, you can utilize the navigation dropdown, navigation collapse, navigation layered or navigation modal element. Simply add any of these element that would works best for your footer. You can then show/hide one navigation element at different screen size. You can make that happen by utilizing “Hide During Breakpoints” option in each of the navigation element setting. To know more about the Hide During Breakpoints option, please check this out:

• https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Hope this helps.