www.webdeveloper.com
Results 1 to 5 of 5

Thread: need assistance with Responsive web development

  1. #1
    Join Date
    Nov 2010
    Location
    Rialto, CA
    Posts
    7

    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.

  2. #2
    Join Date
    Dec 2012
    Location
    Prague, Czech Republic
    Posts
    7
    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/

  3. #3
    Join Date
    Nov 2012
    Posts
    23
    Here are a few things that might help. Hope it does.
    http://www.awwwards.com/7-essential-...t-to-miss.html

  4. #4
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    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;
    }

  5. #5
    Join Date
    Sep 2008
    Location
    Dallas
    Posts
    154
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles