I'm not sure if this is a problem that needs a coding solution or just a theory explanation, but here goes...
I have an HTML file linking several stylesheets + fonts:
<head>
<meta charset="UTF-8">
<title>T6</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="parallax.css" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="annex.css" type="text/css">
</head>
CSS files are in the same folder as index.html (on Dropbox). They appear fine on Chrome and Edge on my desktop, as well as the device simulation option through Chrome's Dev Tools (responsive features intact). So everything works on a desktop browser and even a browser simulating a mobile device. Here is a screenshot of the latter:
But when I open the file on my Android Chrome browser (Nexus 6P; everything's updated), I get this:
It's pretty clear from a visual standpoint that the CSS wasn't recognised at all (but it does recognise the Font Awesome icons). Is this an issue with my device, with the way I'm referencing CSS files on index.html, or something else?
All of my files (images, local CSS) are stored in the same folder, using Dropbox, and the references all work fine on desktop. When I'm using my phone, I open Dropbox, find my index.html file, and open it using Chrome. I have not tested this on another mobile device.
I did play around with the way my index.html references its CSS files, and putting all of my CSS (except for the fonts and icons) in a tag seems to work. This really clutters up index.html, so I was wondering if this was the only solution to solving this issue. I have also yet to try @import, but it's apparently bad practice...(?)
It's probably something to do with dropbox. You shouldn't be using dropbox as a host. Try getting a free shared web hosting account, uploading your files there and accessing it from that.
And tbh I'm surprised it's working on your desktop unless you have the files synced locally to your machine and are viewing them that way?
