MyBB Community Forums

We (softraid.com) are using MyBB for our forum site
I have created a custom theme to match our website theme which works fine at regular size.
On the website I have media queries to create mobile and tablet sized versions of the website.
I have included the media queries css file, plus added specific media queries to the global.css file for our theme.

When I look at this in a browser at the size of a mobile device (eg width: 480 px)  it looks good.
When I look at this on a mobile DEVICE that is the same width, it looks a mess.

There would appear to be something (java script?) identifying when the site is being displayed on a mobile device which overrides the media queries.

I have looked through the documentation and the forum and online but can't find anything helpful. It's mostly about default themes for a mobile device and we want to use our own customised theme.

You don't need to log in to the forum to see the problem: https://www.softraid.com/forum/ (look on a mobile device, it's fine otherwise)
Two screenshots (see attachments): 
softraid.com/forum at 480px width in a Chrome browser
softraid.com/forum on Iphone 5s. 

They should look the same (the rest of the website does) but the media queries (particularly for the search box) are being overridden, hence width of window on mobile is being stretched by the search box out on its own on the right.  Please let me know how I can fix this, with a non js solution if possible (Im using css media queries)

The first image actually cuts off your website, it does not resize it.

Not familiar with this method at all, but you can try doing the following to see if it will help:

1) Add to the top of headerinclude template:

<meta name="viewport" content="width=device-width, initial-scale=1">

2) In global.css, find:

body {
background: #fff;
color: #333;
text-align: center;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
overflow-y: scroll;
}

and comment out overflow-y: scroll; so that you have:

body {
background: #fff;
color: #333;
text-align: center;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
/*overflow-y: scroll;*/
}

Find:

#container {
color: #333;
text-align: left;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
min-width: 990px;
}

and comment out the fixed width setting, so that you have:

#container {
color: #333;
text-align: left;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
/*min-width: 990px;*/
}

Do the same for .wrapper

.wrapper {
width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto auto;
}

so that you have

.wrapper {
width: 85%;
/*min-width: 970px;
max-width: 1500px;*/
margin: auto auto;
}

Thanks! that definitely sorted out the problems I was having!
I had body min-width commented out already, but had missed .wrapper.
Also didn't have that tag in headerinclude.

---

Thought it was solved but now the screen shows as zoomed in by default.
Not sure why.

---

Solved (again!) : for anyone else that needs to know, removing initial-scale=1 from the headerinclude meta tag fixed the zooming problem. The width=device-width part was absolutely essential in fixing the initial problem.