Book Book - 7 months ago 19
HTML Question

Responsive Website: What am I Missing?

When I shrink my viewport, my divs (labeled "Top", "Left", and "Right") stack on top of each other like I want them, but don't show their full widths. The widths of each div becomes cut, so you can't see their full width on a mobile device. How should I change my code to show the full width of each div on a mobile device?



body
{
margin: 0;
padding: 0;
}

#wrapper
{
position: relative;
width: 900px;
height: 600px;
background-color: yellow;
left: 50%;
margin-left: -450px;
top: 0;
}

#main
{
position: absolute;
width: 900px;
height: 100px;
background-color: #99CCCC;
left: 50%;
margin-left: -450px;
}

#main p
{
font-family: sans-serif;
color: #333;
font-weight: bold;
text-align: center;
font-size: 40px;
margin-top: 0;
padding-top: 25px;
}

#left
{
position: absolute;
width: 200px;
height: 500px;
background-color: green;
top: 100px;
}

#left p
{
font-family: sans-serif;
font-weight: bold;
color: #333;
font-size: 45px;
text-align: center;
}

#right
{
position: absolute;
width: 200px;
height: 500px;
top: 100px;
right: 0;
background-color: dodgerblue;
}

#right p
{
font-family: sans-serif;
font-weight: bold;
color: #333;
font-size: 45px;
text-align: center;
}

/* START OF MEDIA QUERIES */

@media all and (max-width: 961px) {

#wrapper {
position: relative
width: 100%;
height: 400px;
background-color: yellow;
left: 0;
margin-left: 0;
top: 0;
}

#main {
position: absolute;
width: 100%;
height: 100px;
background-color: #99CCCC;
left: 0;
margin-left: 0;
}

#left {
position: absolute;
width: 100%;
height: 100px;
background-color: green;
top: 150px;
display: block;
}

#left p {
font-family: sans-serif;
font-weight: bold;
color: #333;
font-size: 45px;
text-align: center;
margin-top: 25px;
}

#right {
position: absolute;
width: 100%;
height: 100px;
background-color: dodgerblue;
top: 300px;
right: 0;
}

#right p {
font-family: sans-serif;
font-weight: bold;
color: #333;
font-size: 45px;
text-align: center;
margin-top: 25px;
}

<!DOCTYPE HTML>
<html>
<head>
<title>Responsive website</title>
<link rel="stylesheet" href="test.css">
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"/>
</head>
<body>
<div id="wrapper">
<div id="main">
<p>Top</p>
</div>
<div id="left">
<p>Left</p>
</div>
<div id="right">
<p>Right</p>
</div>
</div>
</body>
</html>




Answer

Check screen shotPlease check updeted answer:

You have small mistake in your code, add the " ; " after you can give 
"position:relative;" in id "#wrapper" for responsive.
Comments