Filter bar invisible on phones because it’s below the legend. Icon above but…

  • Resolved Jonathon N

    (@imagiscapeca)


    8 months ago

    On phones, three icons indicate search, filter, and view-type. The icons appear above the category-color legend, but the actual search bar/area and the filters appear below the category-color legend. That does not matter on websites with only a small number of color-categories in the legend, but if you have a dozen categories, for example, clicking the search and filter icons won’t have any visible effect. Clicking search or filter affects the display below what appears on screen. So users don’t see the filter bar. They might find it, but they might not. They might just think it’s a broken / badly-designed website and leave.

    On mobile devices / devices with narrow screens, how can we get the search bar and filter to appear above the category-color legend?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Chad McCullough

    (@cmccullough1967)

    Hi Jonathon,

    Thank you for reaching out to us here on the forum. I see that you’ve also submitted a support ticket for this and my colleague is currently helping you.

    I will close this question here and will let my colleague help you in support.

    Thank you so much,
    Chad

    Chad McCullough

    (@cmccullough1967)

    Hello again,

    I know that I closed this forum post but wanted to share what we found, just in case others have this request, as well.

    We have been talking with a colleague about this and the Category Colors block will be rendered above the filter bar, and there isn’t an easy way to change that. You can add some CSS to make things look a little better on mobile, though:

    @media only screen and (max-width: 767px) {
    .teccc-legend ul#legend li {
        font-size: 1em !important;
        padding: 5px;
        margin: 0px;
        border: 1px solid silver;
        border-radius: 3px;
        line-height: 2 !important;
    }
}

    We tested this and it does make mobile look much better.

    Thank you so much,
    Chad

    Hey there,

    I just wanted to follow up to see if this resolved the issue for you?

    Thank you so much,
    Chad

    Thread Starter Jonathon N

    (@imagiscapeca)

    Not ideal, but users should see that clicking the buttons does have an effect and so they can search or filter, so that’s good.
    Thanks Chad. Meant to reply. Swamped.

    Hi Jonathon,

    No worries at all and I completely understand about being swamped.

    Thank you for the follow up, and have a great day!

    Chad

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Filter bar invisible on phones because it’s below the legend. Icon above but…’ is closed to new replies.

Tags