Menu
Hello.
I am coding a responsive website using CSS. I intend the content of the left side bar to appear below the main content on a mobile device. Could you please help me to code it?
Here is my current code:
Thank you.
HTML file:
[CODE]
<html>
<head>
<link rel=”stylesheet” media=”screen and (min-width: 600px)” href=”file.css” />
<link rel=”stylesheet” media=”screen and (max-width: 600px)” href=”mobile.css” />
</head>
<body>
<div id=”sidebar-left”>
<h2>A Left Sidebar</h2>
</div>
<div id=”content”>
<h2>Main Content</h2>
</div>
</body>
</html>
file.css
[CODE]
#sidebar-left{
width: 20%;
float: left;
margin-right: 5%;
margin-left: 5%;
background-color:blue;
}
#content{
width: 65%;
margin-right: 5%;
float: left;
background-color:red;
}
mobile.css
[CODE]
#content{
width: 97%;
margin-right: 1.5%;
margin-left: 1.5%;
background-color:red;
}
#sidebar-left{
display: none;
}