CODEWITHSUNDEEP
androidhtmlcssmobile-browser
attila.hajdo
attila.hajdo

Reputation: 79

index.html NOT loading style.css on mobile browser (offline, saved in folder)

(Please read before bad feedback. There are similar questions but not what im looking for.)

I have a web page, made on a Desktop PC saved in a folder. (Not using any XAMPP or anything else, just the Live Server plugin inside Visual Studio Code.)

I have copy/paste the folder from my Desktop to my phone (Huawei P10). Than i simply open "index.html" but the only thing loads is the content created....no images, no style, no nothing. Any help on this please?

Of course i have my "style.css" in a folder named "css", and images in a folder named "img".

See images also:

I'm using Chrome on mobile.

Html Head code:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>iPhone8 product presentation | Welcome</title>
<link rel="stylesheet" type="text/css" href="css/style.css">

my main folder

my css folder

my image folder

Upvotes: 0

Views: 2873

Answers (1)

PulkitG
PulkitG

Reputation: 662

The way you are calling it is correct. I have checked your gdrive link for the code repository , ran the index.html on my tab. It is working fine for me. I don't think your code has any issue.

Debug it to figure out the issue. Try Remote Debugging on Chrome.

To debug this you can simply:

  1. Open the Developer Options on your Android.
  2. Select Enable USB Debugging.
  3. On your development machine, open Chrome.
  4. Open DevTools.(ctrl+shift+i)
  5. In DevTools, click the Main Menu (click in vertical ellipsis icon on the top right) then select More tools > Remote devices.
  6. In DevTools - Remote devices, open the Settings tab.
  7. Make sure that the Discover USB devices checkbox is enabled.
  8. Connect your Android device directly to your development machine using a USB cable. The first time you do this, you usually see that DevTools has detected an unknown device. If you see a green dot and the text Connected below the model name of your Android device, then DevTools has successfully established the connection to your device.
  9. If your device is showing up as Unknown, accept the Allow USB Debugging permission prompt on your Android device.
  10. Then you can check console tab to see if there are some errors or not.

Upvotes: 1

Related Questions