Hi there,
Yes, that should how the responsive works, but your title isn’t responsive since it’s standard <h1>
without class or responsive text, nor font styling from Typography setting. So I was wondering how it was working without them. The drop-down dimension depends on the size of its menu items and not on device width (yes, it’s not responsive), and it’s been like that since its release, so I’m wondering how it was working before. What I’m trying to get and understand is how you made it before so we could find what’s changed.
In this scenario and case, the best mobile menu is Navigation Collapsed
since it’s layout is vertical (STACKED for mobile), it’s good for mobiles. While the Navigation Dropdown
(your current menu) is similar to desktop menu’s drop-down, the only difference is it uses an icon as a trigger instead of an inline menu. The layout is both the same, the items display horizontally (INLINE for desktop).
Hence again, my question is, how did you manage to make the Navigation Dropdown
respond? Maybe we can start from there and find the differences.
The rem
and em
has the base font, it responds to its base or parent font and not on screen size. If its unit is vh
, vw
, then it should respond to screen size. Please check the explanation here https://stackoverflow.com/questions/15649244/responsive-font-size. He uses @media query to assign different EM value since EM doesn’t respond to screen size, but to the parent or initial font size. The same goes with REM.
I’m not trying to end or dodge this issue, I’m just trying to understand what was your setup and compare it to what I understand since I’ve been using X/Pro and a bit familiar with the setting.
About the <h1>
, it’s not going to be responsive if you’re not going to make it responsive, plus it’s a plain HTML element. You should check Pro > Options > Typography > ROOT FONT SIZE
and apply different ROOT font size for each device to make it responsive. Then each em
and rem
should respond to it, and it’s something I can’t find on your site. It still uses the size declared in CSS file instead of from the settings.
And again, even if you changed the REM and EM values but the ROOT font size are all the same regardless of device, then it’s not going to respond. And now that I starting to understand what’s changed, I think the problem is your Typography settings. Please provide your login credentials so I can verify it.
Thanks!