need assistance with Responsive web development
I've read several books and raticles on Responsive web development and thought I understood it. However, I tried to put the RWD into a site I creating strictly for mobile devices. I hope someone out there can point me in the rightb direction.
I created two stylesheets (1) styles.css that contains the general css calls and a second one to hold the@media checks. The course I took used <a class="banner" href="banner_small.png"></a> as an example to dynamically display an image bassed on the @media located in the responsive.css file.
It looked simple enough, but I guess I didn't understand because the image is not displayed.
I'm using JQM version 1.2.0, HTML5 and CSS3 to develop the website.
Code Snippet from page calling for the top banner:
HTML Code:
<link rel="stylesheet" href="styles/styles.css" />
<link rel="stylesheet" href="themes/template-1.min.css" />
<link rel="stylesheet" href="styles/responsiveStyle.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!-- page -->
<div data-role="page" id="homePage" class="page">
<!-- calls image from responsive.css -->
<header><a class="banner" href="#"></a></header>
ResponseStyle.css file:
HTML Code:
@charset "utf-8";
/* CSS Document */
/* responsive styles */
// set page to be no larger than 980px and place the results in screen center
.page {
position: absolute;
margin: 0px;
margin: 0px auto 0px auto;
max-width: 980pix;
}
/*
This will ensure that any container having float will stretch according to the
properties witin that container.
*/
.clear_both {clear:both; line-height:1px;}
/* small screen device is the default and shouldnot need media call */
body { padding: 5px; }
header .banner{
display: block;
position: relative;
height: 175px;
background-image: url(images/banner_small.png) no-repeat 0px 0px;
}
/* medium screen device - pad devices, */
@media screen and (min-width: 501px) and (max-width: 800px) {
body { padding: 10px; }
header .banner
{
position: relative;
display:block;
position:relative;
height:175px;
background: url(images/banner_medium.jpg) no-repeat 0px 0px;
}
}
/* large sreen device */
@media screen and (min-width: 801px) and (max-width: 980px) {
body { padding: 10px;}
header .banner
{
position: relative;
.page header {
display:block;
position:relative;
height:175px;
background: url(images/banner_large.jpg) no-repeat 0px 0px;
}
}
II'm not looking for someone to do the work for me, as I wouldn't learn anything! I simply want someone to show me the error of my ways.
Thank you in advance.
