3 Replies - 1097 Views - Last Post: 23 February 2013 - 02:50 AM

#1 mattwilson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 22-February 13

Responsive Web Design Problem

Posted 22 February 2013 - 07:59 AM

Hi guys,

I'm still pretty new to coding and I'm trying to get my head around responsive design, could you look at my code and identify why it isn't working? I'm real confused I've read into the concept of responsive design and I thought I had done what was recommended but when I preview nothing is working.

If you know what I am doing wrong I would really appreciate the help!

Thanks

Matt

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link type="text/css" rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
</head>

<body>

	<div id="container">
    	<img src="images/greece.jpg" alt="Greece">
        <div id="left-column">
        	<p>We are going to float this left.</p>
        </div>
        
        <div id="right-column">
        	<p>We are going to float this right.</p>
        </div>
    
    </div>

</body>
</html>


#container {
	width:900px;
	margin-right:auto;
	margin-left:auto;
}

#left-column {
	width:450px;
	float:left;
	background:red;
	
}

#right-column {
	width:450px;
	float:left;
	background:blue;
	
}

@mediascreen and (min-width: 320px) {

#container {
	width:100%;
}

#left-column {
	width:100%;
	background:red;
	
}

#right-column {
	width:100%;
	float:left;
	background:blue;
	
}

img {
	width:100%;
}

}


Is This A Good Question/Topic? 0
  • +

Replies To: Responsive Web Design Problem

#2 scentauri  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 63
  • Joined: 16-February 11

Re: Responsive Web Design Problem

Posted 22 February 2013 - 02:13 PM

From what I understand, Responsive Web Design is about making your code flexible to the different medium and resolutions available (mainly pertaining to mobile phones). The trick with responsive web design is to replace fixed pixed with percentages. If you want two items side by side, rather than state each to be width: 450px each, make each width: 45% or so.

When dealing with responsive web design for mobile devices, keep in mind that you must have a User Agent detection to detect the different mobile phones that are out in the market.

Next thing to do is to set the viewport resolution and make this fixed so that your code becomes exclusive for mobile design.

If you require more information on this, I can provide more info soon; however, my time is fairly limited, but I will try my best to get back to you.

I haven't examined your code fully, but wanted to provide some info to you first because I noticed you are using fixed pixels.
Was This Post Helpful? 0
  • +
  • -

#3 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Responsive Web Design Problem

Posted 23 February 2013 - 12:32 AM

Not all responsive design utilizes percentage based sizing. The skeleton boilerplate uses the 960 grid system with fixed width columns that is totally responsive. I would highly suggest you checking out boilerplate and adapting it, if cross platform is of any concern to you.

Skeleton Boilerplate

This post has been edited by FerretHolmes: 23 February 2013 - 12:32 AM

Was This Post Helpful? 0
  • +
  • -

#4 mattwilson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 22-February 13

Re: Responsive Web Design Problem

Posted 23 February 2013 - 02:50 AM

Thanks for your post guys, from what I have been researching I think that Skeleton Boilerplate would be very useful thanks for the heads up!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1