I have just uploaded my website onto a hosted server with 1&1. The problem I am having is I cannot seem to find out why the media query rules I have set are now not working / are ignorned.
I have tested on my iphone 5 but my website does not scale as it should. However when I resize my browser (Google Chrome) on my desktop to tablet and mobile sizes it does scale correctly.
Is there any reason why when I resize my browser it works perfectly but when I test it on a mobile device it does not work / scale properly?
Just for extra info I am using wordpress and I include my css files in the right way through the functions.php file.
My website is www.jamieclague.com, please feel free to look at the source code.
Thanks for any help, much apprciated.
header.php
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('title'); ?>Jamie Clague - Freelance</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!----- CSS Stylesheet Link ------>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
<body>
CSS - styles.php (snippet of the code)
@media only screen
and (min-device-width:401px)
and (max-device-width:480px){
.header{
min-height:520px;
}
.banner-matter {
top: 22%;
width:100%;
}
.banner-matter p {
overflow: hidden;
width: 100%;
}
}
@media only screen
and (min-device-width:321px)
and (max-device-width:400px) {
.banner-matter h2 {
font-size: 27px;
}
.banner-matter p {
font-size: 20px;
}
a.more span {
left: 30%;
}
}
@media only screen
and (min-device-width:220px)
and (max-device-width:320px) {
img.scroll {
margin-top: -0.7em;
}
a.more {
background-size: 92%;
width: 180px;
height: 64px;
font-size: 1.15em;
}
.view {
padding: 0.3em 0 0;
}
a.more span {
left: 27%;
top: 27%;
}
}
Update
A couple of suggestions.
If you use web inspector you'll see a number of 404s, including
http://www.jamieclague.com/js/jquery.contentcarousel.js
http://www.jamieclague.com/js/jquery.mousewheel.js
http://www.jamieclague.com/wp-content/themes/portfolio/style.css
and a jQuery error from line 113
$ is not a function. (In '$(document)', '$' is undefined)
As a starting point it would be good to fix these.
Also, if I look in http://www.jamieclague.com/wp-content/themes/portfolio/css/style.css?ver=4.6, I'm not sure if you have a closing curly bracket for the statement that starts at line 1813
@media only screen and (max-width:993px){
...
You need a viewport meta tag in the head of your document, without this the default behaviour for mobile devices will be to scale the page to fit your screen.
Something like the following will get you started.
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
Find out more about settings you can use: http://www.w3schools.com/css/css_rwd_viewport.asp
Good luck!