Interesting Mobile Discovery
I have deployed my rebuilt website, and I checked it from my phone using the Firefox mobile app to make sure everything was behaving responsively. The menu was not displaying well at all. The font was too large, the spacing between items was too large and you couldn't see the full item text or the entire menu list.
I set this issue aside and I revisited it a few moments ago. What I discovered is that the website and the menu look great when using the Chrome, Edge or Vivaldi browsers on the phone, but they do not render correctly when using the Firefox or Opera browsers on the phone.
I offer this information as a point of interest and perhaps a point of discussion. Obviously, we can't know what a website visitor might prefer to use as a browser on their phone. Does anyone have a thought - good or bad - about adding a disclaimer that states "This site is best viewed on phones through Edge, Chrome or Vivaldi browsers"? Alternatively, does anyone have a thought as to what, if anything, might be done to get the same performance from Firefox and Opera?
I wouldn't add a disclaimer. From a visitor's perspective, if the site doesn't work properly in their browser, most people won't switch browsers—they'll just leave.
Since it works correctly in Chromium-based browsers (Chrome, Edge, Vivaldi) but not in Firefox and Opera, it sounds more like a compatibility issue than a design issue. I'd start by checking the menu's CSS and any custom code for browser-specific behavior.
Out of curiosity, are you using a theme builder or custom CSS for the mobile menu? I've seen cases where font sizing, flexbox settings, viewport units, or custom menu styling behave differently in Firefox mobile than in Chromium-based browsers.
If you can share the URL, I might be able to identify the exact cause pretty quickly.
Thank you for you input on the idea of adding a disclaimer. Your point is well taken. And thank you for your insights about the menu.
I checked my global header and it uses Header 8 from an Elegant Themes flexbox header pack. You can see it at https://www.elegantthemes.com/blog/divi-resources/flexbox-headers-for-divi-5#download-20-flexbox-headers-for-divi-5
I didn't add any CSS to it, and I see that I didn't use any KrafterPRO presets for any of the elements. It is pretty basic, but it does utilize the ET-provided flexbox header. The only customizing I did involves the use of some negative rem spacing on the second row elements (-1 rem, -3 rem, -1 rem in order). I have added screenshots of the wireframe layout and the end result.
I would also add that in addition to the menu issues, both Firefox and Opera have some issues with the way they display certain specific elements. You can see what I mean by going to www.ranvest.com.
Thank you again for your reply and if you have the time to check it out, I would be very appreciative.
Got it! I will check everything soon.