I have encountered a strange issue with my single-page responsive application that uses angularjs and php. I have embedded all my JavaScript and CSS codes within <script> and <style> tags respectively. While it works perfectly on desktop browsers, it displays funny behavior on mobile browsers. How can I resolve this problem?
Below is the structure of the page.
<html class="no-js lt-ie9" lang="en" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="fragment" content="!" />
.alert-box .dismiss {
font-size: 1.375em;
padding: 5px 4px 4px;
line-height: 0;
position: absolute;
top: 0.4375em;
right: 0.3125em;
color: #333333;
opacity: 0.3; }
.alert-box .dismiss:hover, .alert-box .dismiss:focus {
opacity: 0.5; }