My website is not responsive on mobile devices

wordpress.stackexchange https://wordpress.stackexchange.com/questions/333679

  •  15-04-2021
  •  | 
  •  

Question

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!

Was it helpful?

Solution

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.

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with wordpress.stackexchange
scroll top