CODEWITHSUNDEEP
htmlcss
Mahmudul Hasan
Mahmudul Hasan

Reputation: 25

Responsive media screen width not working

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.

enter image description here

Upvotes: 1

Views: 653

Answers (2)

Dan Mullin
Dan Mullin

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

Hans Spie&#223;
Hans Spie&#223;

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

Related Questions