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
CSS - styles.php (snippet of the code)
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
Code:
<!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)
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%;
}
}