0

I'm building a Wordpress website at http://xscoder.com/wp-demo/test/

I am not able to make it responsive, although all CSS and JS scripts are successfully loaded, as you may see in the Inspector. I guess it's something related to slicknav, although I'm not sure about it, here's the code of my main.js file to call slicknav responsive JS:

$(function(){
        $('#menu-primary-menu').slicknav({
            prependTo: '.site-branding',
            label: '',
            allowParentLinks: true
        });
 });

May you guys can check my wesbite with the Chrome Inspector and see if there's something wronng, the Console soesn't print any error so I don't really know what I'm doing worng, I'm anewbie :)

Any help will be greatly appreciated!

  • 1
    Your question about HTML/CSS/JS, so you should ask them on Stack Overflow. – nmr Apr 5 at 14:31
  • 1
    did you add something like ` <meta name="viewport" content="width=device-width, initial-scale=1">` to your head? – rudtek Apr 5 at 17:17
  • @rudyek that was the solution, thanks so much! – xscoder Apr 5 at 22:27
  • Great news! I added it as an answer below. Do you mind marking as the solution? (check mark to the left of the answer) – rudtek Apr 6 at 18:55
2

Often times even if we have setup our media queries correctly, the site still isn't responsive to those queries.

You need to set a viewport in your header.php to fix this. More often than not I find that this affects macs instead of PCs. but it's still a good idea to add this no matter the case.

In your site <head> add this code:

<meta name="viewport" content="width=device-width, initial-scale=1">

And it should fix the problem. This is telling the site to be aware of the device width that is viewing the site.

1

Add this into your head tags:

<script src="jquery-3.3.1.min.js"></script>

I have not found a recent jQuery version in your head tags and SlickNav requires jQuery 1.7+.

I do not know if this is the solution for your issue, but try it.

  • But for compatibility with a number of things, one should use the old version of jQuery bundled with WordPress, as he's doing. – Loren Rosen Apr 5 at 18:46
  • ... so there's a potential dilemma between compatibility with SlickNav and other things. Would depend on what else is use. – Loren Rosen Apr 6 at 20:50
  • The solution was the missing 'viewport' meta tag, thank you so much anyway @Javi Torre – xscoder Apr 8 at 6:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.