0

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...(?)

Improve this question

1 Answer 1

Reset to default
1

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?

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

So if I'm understanding correctly, it's just an issue with loading html files locally on mobile that causes issues? In terms of desktop, I just open my index.html and everything works fine. The files are all in one folder in my Dropbox for convenience, so I can edit them on my desktop or laptop.
It sounds like your dropbox files are synced to your desktop though? What happens if you go to dropbox.com and open the index.html file there? I suspect it'll have the same issue as what's happening on mobile.
Correct, I didn't think of it that way when you first suggested the Dropbox issue. Thanks Tom, problem solved! (Or at least, you've explained what the issue is. Onto finding a web host!)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.