Improve footer links display on mobile

Bug Reports
1

Hey,

I’m using ListingHive. In the bottom-most footer menu where in the Demo content you show legal page links, there’s only two items which seem to retain perfect centreing. However, I have 5 links in this menu in total, but on mobile, the links look almost right-justified and definitely not centred.

I’ve played around with getting the HivePress AI to provide various CSS snippets to try and improve things, but I can’t seem to get it perfect.

It would be much appreciated if you could share a snippet, or push a quick theme update soon.

Cheers,
Chris :victory_hand:

5

Hi,

Thanks for reporting the issue. The bug is confirmed.

As a temporary solution, please try this CSS snippet:

@media (max-width: 768px) {
  .footer-navbar__menu,
  .footer-navbar__menu .menu {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .footer-navbar__menu li {
    margin: 0 1rem !important;
  }
}

Hope this helps.

1 Like
6

Hi @kseniia,

No worries, and I’m glad to see it was an easy fix.

Many thanks for pointing me in the right direction. I slightly updated the snippet to add more spacing between the items for easier clicking on smaller screens, but it’s perfect now! :grin:

@media (max-width: 768px) {
  .footer-navbar__menu,
  .footer-navbar__menu .menu {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .footer-navbar__menu li {
    margin: 0 1rem !important;
    padding: 0.5rem 0 !important;
  }
}

Cheers,
Chris :victory_hand:

1 Like
7

Yes, this looks much better.

Glad to help. :herb:

1 Like