Problems with meta data not picking css media queries

The mobile and tablet version of my website are a scaled down version of my desktop site. With the mobile version a fixed navigation bar and slidetoggle navigation come into play.

This all worked for a year until about a month ago and something doesnt seem to be recognising the smaller device sizes and I cannot work out what is wrong. On the mobile version the website contents are squashed to the left. Usually I can fix this with changes to css declarations but any changes I now make dont seem to have any effect.

I have run my code through various code checkers and none have flagged up any major errors.

This is my meta data:

<!DOCTYPE html>
<html <?php language_attributes(); ?> >

<head>
<title>MISSNISAA</title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, maximum-scale=1.0">       
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">   
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link href="http://allfont.net/allfont.css?fonts=montserrat-light" rel="stylesheet" type="text/css" />
<script src="https://use.typekit.net/rsg8obz.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;   
i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new    
Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;   
m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com   
/analytics.js','ga');

ga('create', 'UA-64074269-1', 'auto');
ga('send', 'pageview');

</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {

/*prepend menu nav icon*/
$("#menu-nav").prepend("<div id='menu-nav-icon'>&#9776</div>");

/*toggle nav*/
$("#menu-nav-icon").on("click", function() {
$(".menu-nav").slideToggle();
$(this).toggleClass("active");
});

});
</script>

<script type="text/javascript">
jQuery(document).ready(function($) {

/*prepend menu social icon*/
$("#menu-social").prepend("<div id='menu-social-icon'>&#9776</div>");

/*toggle social*/
$("#menu-social-icon").on("click", function() {
$(".menu-social").slideToggle();
$(this).toggleClass("active");
});

});
</script>

</head>

Grateful for any help as I have hit a wall with this.

Read more here: Problems with meta data not picking css media queries

Leave a Reply

Your email address will not be published. Required fields are marked *