need assistance with Responsive web development

**boblan66** · 01-10-2013 01:49 AM

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.

**shinamee** · 01-10-2013 03:17 AM

I suggest you have to go back to learn more.

You can also checkout this: http://twitter.github.com/bootstrap/

And this: http://css-tricks.com/css-media-queries/

**michellepinto** · 01-15-2013 05:59 AM

Here are a few things that might help. Hope it does.
http://www.awwwards.com/7-essential-...t-to-miss.html

**holyhttp** · 01-16-2013 02:52 PM

You should not nest the CSS styles:
header .banner
{
position: relative;
.page header {
display:block;
position:relative;
height:175px;
background: url(images/banner_large.jpg) no-repeat 0px 0px;
}
}

Instead

header .banner{
position: relative;
display:block;
position:relative;
height: 175px;
background: url(images/banner_large.jpg) no-repeat 0px 0px;
}

**Javaboey** · 01-25-2013 04:26 PM

No sense in doubling/tripling/etc up on your code. If <header> has a style that is consistent between all queries, just have header {display: block; position: relative; etc:etc;}. Those are the same within all your queries. Only put the code that changes in your query sections. So just have code outside of your query statements that applies to all, then specific code within the relative sizes. Know what I mean?

Thread: need assistance with Responsive web development

Thread Tools

Display

need assistance with Responsive web development

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions