CODEWITHSUNDEEP
htmlcssgrid
ManishChahal
ManishChahal

Reputation: 183

Media queries not working in responsive web design with grids

CSS used on the page to display grid elements in different viewport size Code to display the grid and its descendants based on the size of the viewport. If the size of the screen becomes smaller then based on the size of the screen the columns should drop and acquire a single row in mobile mode for each container. In the case of tablet mode main and sidebar should drop from 2nd row to the third row.

body{
    margin: 0;
    padding: 0;
}

.gridContainer{
    display: grid;
    height: 100%;
    
    grid-template-columns: 20% 1em 1fr 1em 20% ;
        grid-template-rows:  4.4em 1em 1fr 1em 4.4em;
    grid-template-areas: "header header header header header"
        ". . . . ."
        "navigation . mainContent . sidebar"
        ". . . . ."
        "footer footer footer footer footer";
}
.gridHeader{
    grid-area: header;
    background-color: #A62E5C;
}

.gridFooter{
    grid-area: footer;
    background-color: #A62E5C;
}

.gridNav{
    grid-area: navigation;
    background-color: #9BC850;
}

.gridMain{
    grid-area: mainContent;
    background-color: #9BC850;
}

.gridSide{
    grid-area:  sidebar;
    background-color: #9BC850;
}

.grid-item {
    color: #fff;
    box-sizing: border-box;
    font-size: 1em;
    padding: 1em;
    overflow: hidden;
    text-align: center;
}

@media screen and (max-width: 768px) {
    
    .grid-container {
        grid: 1fr 1em 30% / 4.4em 1em 3.6em 1em 1fr 1em 4.4em;
        grid-template-areas:
        "header header header"
        ". . ."
        "navigation navigation navigation"
        ". . ."
        "content . sidebar"
        ". . ."
        "footer footer footer";
    }
    
}
    
@media screen and (max-width: 480px){
    .gridContainer{
        grid: 1fr / 3.6em 1em 4.6em 1em 1fr 1em 4.6em 1em 3.6em;
        grid-template-areas: "header"
            "."
            "navigation"
            "."
            "mainContent"
            "."
            "sidebar"
            "."
            "footer";
    }    
}

HTML is used on the page to display grid elements in different viewport size:

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>
            Modern Web Layout
        </title>
        <link rel="stylesheet" href="css/main.css" type="text/css">
    </head>
    <body>
        <main class="gridContainer">
        <header class="gridHeader grid-item">
            HEADER
        </header>
            <section class="gridNav grid-item">
                NAVIGATION AREA
            </section>
            <section class="gridMain grid-item">
                MAIN CONTENT
            </section>
            <section class="gridSide grid-item">
                SIDEBAR
            </section>
            <footer class="gridFooter grid-item">
                FOOTER
            </footer>
        </main>
    </body>
</html>

Codepen

Upvotes: 2

Views: 2140

Answers (3)

Abdelkader Boukhalfoun
Abdelkader Boukhalfoun

Reputation: 33

It looks like the issue is that in your media queries, you're using .grid-container, but the class in your HTML and CSS is .gridContainer. Since CSS is case-sensitive, you'll want to make sure the class names match exactly.

Also, instead of using the grid shorthand, which can be a bit confusing, try switching to grid-template-columns and grid-template-rows. It’ll make the layout easier to understand and manage.

@media screen and (max-width: 768px) {
    .gridContainer {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "header"
            "navigation"
            "mainContent"
            "sidebar"
            "footer";
    }
}

Upvotes: 0

Aditi
Aditi

Reputation: 1198

You have used .grid-container instead of .gridContainer for tablet layout.

Upvotes: 1

Blaksky
Blaksky

Reputation: 31

I actually had this problem yesterday, and it was very simple instead of just @media screen its @media only screen Hopefully that works for you!

Upvotes: 0

Related Questions