UM Members Directory Left Filter Box Not Mobile Responsive

  • wesmed

    (@wesmed)


    7 months, 3 weeks ago

    Hello @missveronicatv,

    It’s been a while and hope you’ve been well! A while back you successfully helped me with the Directory left filter box mobile responsiveness so that on desktop, the filters would display to the left of the profiles, and on mobile/tablet, the filters would display above the profiles (like the UM default). Recently, it was brought to my attention that my site’s member directories were not responsive on mobile. I went back to your GitHub, UM Members Directory Left Filter Box, and followed the instructions, but can’t get the filters to behave correctly. Currently, the filters are displayed left of the profiles on desktop (which is perfect), but also on mobile devices, which makes it nearly impossible to navigate on mobile.

    I have two files in my active theme’s
    .../ultimate-member/templates/ folder

    members.php size 1 KByte with this code snippet only
    members-screen.php size 17 KByte with the “left filter template” only with a new file name without any PHP code changes

    Am I missing something? I would GREATLY appreciate your assistance.

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

Viewing 8 replies - 16 through 23 (of 23 total)
1 2
  • missveronica

    (@missveronicatv)

    7 months, 2 weeks ago

    @wesmed

    Have the users switched their browsers to “Desktop View”?

    Thread Starter wesmed

    (@wesmed)

    7 months, 2 weeks ago

    @missveronicatv

    No, users have not switched to desktop view

    missveronica

    (@missveronicatv)

    7 months, 2 weeks ago

    @wesmed

    Do you have any mobile browser log entries you can post here in the Forum?

    Thread Starter wesmed

    (@wesmed)

    7 months, 2 weeks ago

    @missveronicatv

    This is what I found in the um-browser-detection-log.html but I’m not really sure what this means…

    <div>17:35:36, user_id=1, mobile=?0, agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36</div><div>18:05:54, user_id=1, mobile=?0, agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36</div><div>18:08:04, user_id=1, mobile=?0, agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36</div><div>18:08:59, user_id=1, mobile=?0, agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36</div><div>18:18:15, user_id=1, mobile=?0, agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36</div><div>18:19:27, user_id=1, mobile=?0, agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36</div><div>18:29:43, user_id=1, mobile=?0, agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36</div><div>18:48:39, user_id=0, agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:142.0) Gecko/20100101 Firefox/142.0</div><div>20:22:54, user_id=0, agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/601.2.4 (KHTML, like Gecko) Version/9.0.1 Safari/601.2.4 facebookexternalhit/1.1 Facebot Twitterbot/1.0</div><div>21:07:37, user_id=0, agent=Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm) Chrome/116.0.1938.76 Safari/537.36</div><div>01:47:12, user_id=0, agent=Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Amazonbot/0.1; +https://developer.amazon.com/support/amazonbot) Chrome/119.0.6045.214 Safari/537.36</div>

    missveronica

    (@missveronicatv)

    7 months, 2 weeks ago

    @wesmed

    I have tried to reproduce this issue with Android and several browsers without success.

    Which phones/tablets and browsers are having these issues?

    Plugin Support andrewshu

    (@andrewshu)

    7 months, 1 week ago

    Hi @wesmed

    This thread has been inactive for a while so we’re going to go ahead and mark it Resolved.

    Please feel free to re-open this thread if any other questions come up and we’d be happy to help. 🙂

    Regards

    Thread Starter wesmed

    (@wesmed)

    7 months, 1 week ago

    @missveronicatv

    Sorry for the delay; I’ve been traveling. I’m encountering these issues on iPhone 16, iPhone 14, PC laptop, MacBook, and PC desktop, and I’ve tried using Chrome, Safari, Firefox, and Bing. I’d be curious to know how it’s being displayed on your end, but for me, I’m seeing:

    Mobile directory layout

    • Map is displayed at 100% width of screen (which is good)
    • Filters are not visible at all
    • Profiles are displayed at 100% width of screen, below the map (which is good)

    Desktop directory layout

    • The map and filters are both displayed to the left of the profiles (filters to the left of the profile is good, but map on the left not)
    • Map and filters are the same with (~25% of screen)

    Could it be because the modified UM Members Directory Left Filter Box members.php template is using table-cell, table-row, table, etc., instead of flex? To reiterate, what I’m trying to achieve is for the map to display 100% width above the profiles and filters, and below the map, the filters to be displayed to the left of the profiles.

    Thank you again for your patience and assistance!!!

    missveronica

    (@missveronicatv)

    7 months, 1 week ago

    @wesmed

    If you are using a map from the paid UM extension “User Locations”
    I can not make any conflict tests with the filter layouts by the Forum guidelines:

    https://ww.wp.xz.cn/support/guidelines/#do-not-post-about-commercial-products

Viewing 8 replies - 16 through 23 (of 23 total)
1 2

The topic ‘UM Members Directory Left Filter Box Not Mobile Responsive’ is closed to new replies.

Tags