Hey y’all im back with some crazyyyy problems again!
I just deployed a simple site for a friend of mine, its my first one (yayy)! pulled it up live in Chrome, looks great, and its all working BUT NOT ON MY PHONE
yes, i have mobile friendly CSS in there, but for some reason my iphone 8 isnt displaying ANY CSS at all, only the HTML! the css is linked and in the same folder on Cpanel, and it shows it on PC.
what kind of strange thing is this? obviously dont have Console on my phone so i have no idea how to check for errors, CTRL SHIFT J on live server and on the site shows it properly. ideas? voodooracinginnovations.com
is the live site up now.
not quite, though he is having issues with changes to CSS displaying, my css is nowhere to be found on mobile. also, i do have the proper meta tag with viewport, initial scale, etc.
i dont think its an issue relating to the media queries coming to life, as the ones i have setup would be in use at this point. but then again even with no queries i should be able to see some badly scaled css rather than no css right?
I don’t have much to help you here, but just wanted to let you know it could be a browser or iPhone screen issue. I can pull up your site just fine on my phone (Samsung GS8+, android) in the android chrome browser, latest version. It’s responsive for me, all the images and everything else loaded, links work, embedded video plays. The page scroll overlaid on the white car also works fine.
It may be something with safari that’s causing the CSS not to display properly or a problem with the site being unable to accurately judge the size of your iPhone screen. Maybe look into cross-browser compatibility issues?
If you have Visual Code Studio and are doing a draft site press: crtl and ` at the same time then type: npm run serve then type in the numbers that you see on the Network: http://192.111.1.11:8080/BlahBlahBlah/
type it exactly as you see it and you will be able to view it on your mobile phone
i have tested it now on several phones of different OS’s and versions, older android has same issue, newer displays as it should. through much googling though this isnt a problem that has a lot of answers, or any really (just dead threads mostly).
thanks for the tip, i installed NPM in VS code and tried to run the extension but every variation of the command does not work, error code every time, and i did restart VS code after install. “term is not recognized” kinda stuff. is that the exact command? “npm run serve”? i also tried no spaces, and perhaps its “server” instead, but nah lol.
Don’t worry about NPM here actually can just be a way to run the livereloading server locally for otherwise static projects and easily serve up your site to various clients on the LAN. Also vscode can be helpful in setting up debug configurations and is just generally a nice editor.
See the image above, hit F12 or go to chrome developer tools through the chrome menu. In the developer panel see 1 in the image above hit the dots go to 2 more tools and then select 3 remote devices and you’ll see a remote device debugging panel. If that is open and you activate developer mode and USB debugging on the phone in question then you can remote debug for android.
For iOS/Safari remote debugging can see the page here but less experience here with that
In general the idea is get a remote debug session going where you can look at the network requests panel in the debug panel of the browser and see if the CSS is being requested from the appropriate URL (or not at all) and if the response looks good or not. This should help narrow down the issue.
okay right on, yeah ive been using that but navigating to it via CTRL SHIFT J, and selecting the various mobile and tablet presets to test, but that remote thingy is neat!
i ended up just simplifying the whole deal and dropped the img. as the background and using the arrow scroll to just putting it in a div, giving it max settings, and letting it scale for mobile. i relaunched that page and now my iphone is playing nice with it. thanks so much for all the help, i hope you have a great new year as well and i look forward to bugging you guys in the forum with my problems in the future LOL
Right on, and good to hear! Glad I could be of some assistance. I run into problems frequently myself, the forum is always a good place to get a quick helping hand.
