Mobile Menu Button Doesn't Appear As Expected On Mobile Devices

I have a menu toggle button for my mobile design (inherited from the Storefront theme), that works fine when I decrease the width of my PC browser window to no more than the max-width of the media query it's styled within. But when I visit it actually using a phone or tablet, and I've tried three different browsers; the text, which is Meny, takes up two rows. 'Men' on the first row, and a 'y' on the second. The width of the element is set to auto, and the max-width to 120px. So it should have room to expand, but it doesn't. Why does the button render with it's text on one line in a desktop window, but on two lines on a phone or tablet?

And there is more. The toggle button can be selected with the css selection 'button.menu-toggle'. And if I put a wider width for it, say width: 120px; the button becomes this length in the desktop browser (Firefox), but on a phone or tablet it doesn't seem to have any effect. This code looks as follows:

@media (max-width: 768px) {
    button.menu-toggle {
        width: auto;
        max-width: 120px;
        /*width: 120px;*/
    }
}

Even if I set the CSS as inline CSS with JavaScript, the button doesn't expand on my phone. I have tried to set it like this:

jQuery(button.menu-toggle).css({
/*width: auto,*/max-width:120px, width: 100px
});

You can see it at my website (a work in progress), here: https://www.techsaker.se .

Why does it work as I want it to on a desktop, but not on mobile devices?

Update:

Ok, thanks for the comment bosco. I'll keep that about the topic in mind if I post questions in the future. Anyhow I just want to round this off. When I tried Edge's device emulation the other day, I found out that I had CSS properties for this button's class in two places, and all of a sudden it worked when I put a min-width in one of these brackets. Edge's emulation actually showed the problem as it appeared when I visited the site with a mobile device, which Firefox's didn't. Maybe the other CSS properties for this conflicted with it, but I haven't succeeded in reproducing that. I just sat a few moments with Edge's web development tool and tried setting the exactly same CSS properties like I wrote that I set with JavaScript, and which I think I have tried in the CSS file as well, and it works fine in Edge.

I haven't gotten to the bottom of what it was making it not work, but it works as I want it to now. It would be nice to know what caused it. The next time a device emulation doesn't match the rendering on my phone or tablet, I'll try a different browser's emulation right away. And I don't know why that was the case, either. Unchecking the new min-width property I use leads to the two row text rendering in Edge again, but in Firefox it still doesn't render that way regardless. I don't remember this, but just maybe, with Firefox not showing the problem in its device emulation, I might have not actually tested a solution that works with my phone or tablet. But I'm thinking I must have tested the site with the JavaScript I included in my question here, and those properties do work according to Edge's device emulation.