Reputation: 25
My css and html is as below but when I shrink the screen size, content columns are not working as I want them one below another. To be more clear, I want the screen divided into two columns on bigger display. But on smaller screens each content column should occupy hundred percent width of the screen.
.page-container {
position: relative;
min-height: 100vh;
}
.content-wrapper {
padding-bottom: 100px;
}
.left-content {
width: 75%;
float: left;
background-color: red;
}
.right-content {
width: 25%;
float: left;
background-color: green;
}
.content-wrapper:after {
content: "";
display: table;
clear: both;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: green;
color: white;
text-align: center;
}
@media screen and (max width: 800px) {
.left-content, .right-content {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<div class="page-container">
<div class="content-wrapper">
<div class="left-content">
<p>This is left content.</p>
</div>
<div class="right-content">
<p>This is right content.</p>
</div>
</div>
<div class="footer">
This is footer.
</div>
</div>
</body>
</html>
I want the green right column below the red left column when the screen size is small.
Upvotes: 1
Views: 653
Reputation: 4415
Here is a solution using flexbox instead of relying on float
You had an error in your media query as well. You were missing the dash in max-width
.page-container {
position: relative;
min-height: 100vh;
display: flex;
flex-flow: column nowrap;
}
.content-wrapper {
padding-bottom: 100px;
display: flex;
flex-flow: row nowrap;
flex: 1;
}
.left-content {
width: 75%;
background-color: red;
}
.right-content {
width: 25%;
background-color: green;
}
.content-wrapper::after {
content: "";
display: table;
clear: both;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: green;
color: white;
text-align: center;
}
@media screen and (max-width: 800px) {
.left-content, .right-content {
width: 100%;
}
.content-wrapper {
flex-flow: column nowrap;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<div class="page-container">
<div class="content-wrapper">
<div class="left-content">
<p>This is left content.</p>
</div>
<div class="right-content">
<p>This is right content.</p>
</div>
</div>
<div class="footer">
This is footer.
</div>
</div>
</body>
</html>
Upvotes: 1
Reputation: 945
There is a syntax error in the media feature part of your media query. It must be @media screen and (max-width: 800px)
, with a -
.
Upvotes: 3