CSS media queries not wrapping Flexbox container elements for desktop version of Holy Grail responsi-CodePudding

I have been working through a guided project on Coursera for creating responsive Holy Grail layouts with CSS Flexbox. I was following along fairly well, and everything was behaving as expected. I was copying the code from the videos verbatim, as far as I know. At the end, when including media queries for responsiveness, the resulting page has only displayed the mobile layout (column) and does not change to the wrapped desktop layout as expected. I even added a viewport meta tag after the initial problem, but this has not helped. I also tried including the rule "display: flex;" under the desktop media query (the one with min width 770 px), though this was not included in the video so I removed it. I have experimented with different minimum values for each breakpoint. I also checked to make sure the browser zoom (in both Chrome and Firefox) was set to 100%, but no matter how I resize, there is no reaction. In short, I have been trying to duplicate the video's code but cannot figure out why I am not getting the results the video shows, so I must be doing something wrong.

Here is my HTML:

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta name=”viewport” content=”width=device-width, initial-scale=1″>
        <meta charset="utf-8">
        <title>Holy Grail Layout</title>
        <link rel="stylesheet" href="holy-grail-practice.css">
    </head>
    <body>
        <div ></div>

            <header >
                <h1>Header</h1>
            </header>

            <aside >
                <h1>Navigation Bar</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dapibus ultrices in iaculis nunc. At varius vel pharetra vel turpis nunc eget lorem dolor. Auctor urna nunc id cursus metus aliquam. Volutpat lacus laoreet non curabitur gravida arcu ac. Maecenas accumsan lacus vel facilisis volutpat est. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Fermentum posuere urna nec tincidunt praesent.</p>
                </h1>
            </aside>
            <article >
                <p>
                    <h1>Main Content</h1>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dapibus ultrices in iaculis nunc. At varius vel pharetra vel turpis nunc eget lorem dolor. Auctor urna nunc id cursus metus aliquam. Volutpat lacus laoreet non curabitur gravida arcu ac. Maecenas accumsan lacus vel facilisis volutpat est. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Fermentum posuere urna nec tincidunt praesent.
                </p>
            </article>
            <aside >
                <h1>Sidebar</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dapibus ultrices in iaculis nunc. At varius vel pharetra vel turpis nunc eget lorem dolor. Auctor urna nunc id cursus metus aliquam. Volutpat lacus laoreet non curabitur gravida arcu ac. Maecenas accumsan lacus vel facilisis volutpat est. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Fermentum posuere urna nec tincidunt praesent.</p>
            </aside>
            <footer >
                <h1>Footer</h1>
            </footer>
            
        </div>
    </body>
</html>

And my CSS:

* {
    padding: 5px;
    margin: 5px;
    border-radius: 20px;
}

body {
    color: black;
    text-align: center;
    line-height: 3;
}

.header {
    background: tomato;
}
.left-sidebar {
    background: yellow;
}
.main {
    background: deepskyblue;
}
.right-sidebar {
    background: hotpink;
}
.footer {
    background: lightgreen;
}

@media all and (min-width: 600px) {
    .flex-container {
        display: flex;
        flex-direction: column;
    }
}

@media all and (min-width: 770px) {
    .flex-container {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .header,
    .footer {
        width: 100%;
    }
    .left-sidebar {
        order: 1;
        flex: 1;
    }
    .main {
        order: 2;
        flex: 2;
    }
    .right-sidebar {
        order: 3;
        flex: 1;
    }
    .footer {
        order: 4;
    }
    
}

CodePudding user response：

there is nothing inside your flex-container, you have an additional </div> at line 10, you must delete it to include all inside your container :D