I am attempting to design a mobile-friendly layout using CSS and HTLM5.
In my styles, I have included the following code at the end:
@media only screen and (max-width: 480px) {
body {
padding: 5px;
background-color:#FFF;
background-image:url(images/smoothieworld_logo_mobile.jpg;
background-repeat:no-repeat;
}
#wrap {
with:auto;
margin-top:80px;
}
#masthead, sidebar {
display:none;
}
#mainnav {
height: auto;
}
#mainnav li {
float:none;
width: auto;
text-align:left;
border-top: 1px grey solid;
border-bottom: 1px grey solid;
}
#maincontent {
float: none;
width:auto;
background-color:white;
}
#footer, #footer p {
clear:none;
width:auto;
height:auto;
background-image:none;
padding-top:20px;
margin-top:0px;
}
}
Unfortunately, this setup is not functioning properly in Safari and Firefox, even though they are both updated versions.
To address this issue, I appended a script below the links to my stylesheets like this:
<link rel="stylesheet" media="screen" href="reset.css" type="text/css" />
<link rel="stylesheet" media="screen" href="base.css" type="text/css" />
<script scr="modernizer-2.6.2.js" type="text/javascript"></script>
However, when I resize my browsers, the preview of my layout remains incorrect.
Could someone please guide me on where I might be going wrong?