Styling different between desktop and mobile

Ahhh!

Yes, I currently have Vertical Menu installed as I own that too (from a long ways back). However, I would prefer to use yours as I like having a bunch of extensions from one developer. I have turned MMP back on and turned off VM for now so you can see it. If you can get it behaving as expected I'd much prefer to use it.

FYI, when designing in the admin area, the preview does not reflect exactly what you see on the frontend. Not sure if that's all related.

Cheers

FYI, when designing in the admin area, the preview does not reflect exactly what you see on the frontend. Not sure if that's all related.

currently I don't know. I'm trying to understand the problem.
By my side I see always the same button, no difference on any browser or mobile test
please try to set the "line-height" at 20px
tell me if you get the same result on desktop and mobile. If not, please tell me how you are testing the mobile view (by my side tested with firefox in mobile mode, Chrome and also on my Samsung phone)

PS : also try to give another font-family, try "Arial", because "Segoe UI" is not known by mobile phones

Hi Ced

So I ended up with a line height of 44 and Arial. It looks pretty correct now - it's 100% on desktop, but a little high on mobile. I'm using a Samsung Galaxy S7 to test the mobile version. I've used those emulators, but, in my experience, they can give mixed results.

As an FYI, when I added Arial to the button text, I got a warning that it was not a loaded Google Font. Found that a bit strange as I would have thought it would have recognized Arial for the common font it is and not be necessarily expecting a Google Font.

Anyway, it seems to be working reasonably now, though I have no idea why it doesn't display the same on mobile as desktop. With these changes, the preview now reflects the desktop display.