BrowserSync not loading styles on mobile and ipad

[RaMonkey]

Added my localhost in the Gruntfile.js @ line 200 as instructed and the browser opens and appears normal with styles being injected (font awesome icons not showing tho).

But when viewing the site on iPhone or iPad, I only see the html without styling.

browserSync: { dev: { bsFiles: { src : [ 'assets/stylesheets/_.css', '__/_.php', 'assets/javascript/*_/_.js' ] }, options: { watchTask: true, // fill in proxy address of local WP server proxy: "localhost:8888/paterson-jackson/" } } } });

Am I doing something wrong?

[dantahoua]

I don't think it's a browsersync or foundationpress related problem but a problem with way Wordpress handle links in the header of your page... You should use something liek Xip.io or a proxy to be able tocheck your website locally on other computer/tablet. Also there is a wordpress plugin that will rewrite all your links with relative path - relative-url

[RaMonkey]

Hi dantahoua,

Thanks for your reply!

Since I'm making use of mamp, I also tried http://paterson-jackson.192.168.178.17.xip.io:8888/

However, the result is the same.

I just can't get the styles injected even tho the connection is there.

Unfortunately I'm not much of a Grunt specialist.

[dantahoua]

Yes just try relative-url... Very useful! :) https://fr.wordpress.org/plugins/relative-url/

[RaMonkey]

Thank you very much.

Going to try it out and let you know if it solved the problem.

[RaMonkey]

Didn't work either :-/
html yes css no

[colin-marshall]

What address are you visiting on your mobile device?

[RaMonkey]

The external http://192.168.178.17:3000/name-project

[colin-marshall]

@RaMonkey did some asterisks get stripped from your original post?

It should be:

browserSync: {
            dev: {
                bsFiles: {
                    src : [
                        'assets/stylesheets/*.css',
                        '**/*.php',
                        'assets/javascript/**/*.js'
                    ]
                },
                options: {
                    watchTask: true,
                    // fill in proxy address of local WP server
                    proxy: ""
                }
            }
        }

Also, does paterson-jackson contain this specific project's files or are they in a subdirectory?

[colin-marshall]

Also, this sounds like it could be relative to the issue:
http://www.shakyshane.com/javascript/nodejs/browser-sync/2014/08/24/browser-sync-plus-grunt/

We might need to ditch grunt-browser-sync for regular browser-sync in order to get the injection functioning like it's supposed to. I just rewrote the build system to use Gulp so I'll wait and see if @olefredrik is going to make the switch to Gulp before I do anything else with the Grunt.

[RaMonkey]

Yeah I read that post Shakyshane wrote about browsersync and grunt.

[colin-marshall]

@RaMonkey did you try out the new build system with Gulp to see if Browsersync is working now?

[RaMonkey]

Hi @colin-marshall,

No, I wasn't aware it was already available 👍

As soon as I have some time for testing, I will definitely do so!

[RaMonkey]

Hi @colin-marshall ,

BrowserSync working like a charm in Gulp config :-).

Have a great weekend all.

[olefredrik]

👍