While testing a website, I noticed that it functions perfectly on desktop and laptop devices. However, when accessed using a mobile device, the layout is completely messed up.
You can view the example page at . All CSS and JS files are accessible in the source code. Here's an excerpt:
HTML:
<!doctype html>
...
</body>
</html>
Main Page CSS:
html, body {
margin:0px;
height:100%;
}
...
#second_section {
margin: 0px auto;
position:relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
When viewed on a laptop with any browser, the page is responsive as expected when resized. However, on a mobile device, the page fails to load properly.
Will all the CSS files load correctly on a mobile device?
I have created 3 CSS files for different screen widths. If the mobile device only loads css/deco_649.css, this could explain why the styling is not rendering correctly.