Titanium webview loads WordPress site but no CSS

Question

I'm really at a loss right now, because my project has suddenly stopped working properly.

I made an Android application using Appcelerator Titanium. The app has a menu system which, when pressed, loads a page from my website in a webview. The website is a custom WordPress theme that I'm currently developing that uses CSS in order to rearrange elements on screen based on the size of the window the website is viewed.

Next to that I'm using Google Chrome's developer tools in order to preview the changes I make to my website. The developer tools are very handy in order to view your website on several screen sizes.

All works well but at a certain point the webview started ignoring the media queries in the CSS. How do I know the webview is ignoring the media queries? It started when I uploaded my final CSS version. I didn't get an error or anything, it just stopped working.

I have several CSS outside the media queries which do work, and when changing the colors of an h2 tag, all devices are synchronized as they should. But only in the webview of the app the media queries are ignored, everything outside the queries works fine. Using my phone's browser I am able to view te webpage with the correct CSS, using Chrome's developer tools I'm also able to see the webpage with the correct CSS. With the webview in my app I only see the what the page should show without the media queries.

The funny thing is that it worked perfectly before and until that final CSS version only the webview ignores the media queries. I've tried reinstalling the app, clearing app cache, clearing phone and pc browser cache, WordPress cache plugins, rebuildt the CSS but nothing seems to work.

So here is my CSS file, located in wp-content/themes/theme_name folder of my website:

body {
    font-family: arial, helvetica, verdana;
    height: 100%;
}

.header {
    background-color: #1be;
    top: 0;
    height: 250px;
}

.content {
    background-color: #fff;
    margin-left: 2%;
    width: 100%;
}

.footer {
    background-color: red;
    margin-top: 5px;
    width: 72%;
    height: 50px;
}

h2 {
    color: #8b3988;
}

p strong {
    color: #8b3988;
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
    #header {display: none;}
    a:link {text-decoration: none;}
    a:visited {text-decoration: none;}
    h2{font-size: 30px;text-align: center;}
    .footer{display: none;}
    ul{display: inline;list-style: none;}
    ul li {background: url('images/itemBackgroundx300.png')bottom left no-repeat;height: 102px;}
    ul li a:link {width: 125px; margin-left: 5%;color: #8b3988;text-decoration: none; font-size: 20px;display: inline-block; vertical-align: middle;}
    ul li a:visited {width: 125px; margin-left: 5%;color: #8b3988;text-decoration: none; font-size: 20px;display: inline-block; vertical-align: middle;}
    ul li img{width: 100px; height: 100px; display: inline-block; vertical-align: middle; margin-left: 10%;}
    ul li p{display: inline-block; vertical-align: middle; }
    p img{margin-left: 2%; width: 96%; height: auto;}
    p a:link {text-decoration: none;},
    p a:visited {text-decoration: none;}
    table{width: 96%;}
    table td{border-right: solid 1px #d7bedb; border-bottom: solid 1px #d7bedb;}
    td:first-child{width: 65%;}
    .content div img{display: none;}
}

Answer 1

I don't really have a great way to test this, but I would check your CSS syntax inside the media query for errors. For instance, there is a comma after p a:link {text-decoration: none;},

Some things that I would try if I were in your shoes would be to remove the "only screen" in the query and use "all" just to test.