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
});
});
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 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
2 Answers
Reset to default 2Often 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.