New Topic/Question
Reply
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%;
}
}
MultiQuote
| 