My website is not responsive on mobile devices|Programmer puzzle solving

I'm building a Wordpress website at /

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!

I'm building a Wordpress website at http://xscoder/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
        });
 });

Share Improve this question asked Apr 5, 2019 at 14:17 Frank Eno 1134 bronze badges

1 Your question about HTML/CSS/JS, so you should ask them on Stack Overflow. – nmr Commented Apr 5, 2019 at 14:31
1 did you add something like ` <meta name="viewport" content="width=device-width, initial-scale=1">` to your head? – rudtek Commented Apr 5, 2019 at 17:17
@rudyek that was the solution, thanks so much! – Frank Eno Commented Apr 5, 2019 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 Commented Apr 6, 2019 at 18:55
i have quistion please help me: stackoverflow/questions/69349273/… – amin kotoki Commented Sep 27, 2021 at 19:52

Add a comment |

2 Answers 2

Sorted by: Reset to default 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.

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.

Programmer puzzle solving

My website is not responsive on mobile devices

2 Answers 2

Articles related to this article

comment list (0)