Kevin Powell - Community•2y ago

CSS Media Queries

Hello there, I am trying to set up media queries for mobile devices. For some reason height: 100vh; doesn't seem to be working right.

@media all and (max-width: 36.25rem) {
    body {
        width: 100vh;
        height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: 6vh 90vh 4vh;
        grid-template-areas: 
        "header"
        "main"
        "footer";
        gap: 0.5rem;
    }
    header {
        height: 6vh;
    }
    main {
        height: 90vh;
        grid-template-columns: 1fr;
        grid-template-rows: 0.1fr 0.5fr 1fr;
        grid-template-areas: 
        "alphaNum-container"
        "aside" 
        "encryption-area-container";
        aside {
            grid-area: aside;
            display: flex;
            flex-direction: column;
            form {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
                label {
                    font-size: 2rem;
                }
                input {
                    width: 6%;
                    font-size: 1.2rem;
                }
                textarea {
                    font-size: 1.5;
                }
            }
        }
        .encryption-area-container {
            align-items: center;
            textarea {
                width: 90%;
                height: 90%;
                font-size: 1.5rem;
            }
        }
    }
    footer {
        height: 5vh;
        p {
            padding: 1rem;
            color: rgba(0, 0, 0, 0.5);
            font-size: 1.5rem;
            a:hover {
                cursor: pointer;
                text-decoration: 1px line-through solid black;
            }
        }
    }
}

@media all and (max-width: 36.25rem) {
    body {
        width: 100vh;
        height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: 6vh 90vh 4vh;
        grid-template-areas: 
        "header"
        "main"
        "footer";
        gap: 0.5rem;
    }
    header {
        height: 6vh;
    }
    main {
        height: 90vh;
        grid-template-columns: 1fr;
        grid-template-rows: 0.1fr 0.5fr 1fr;
        grid-template-areas: 
        "alphaNum-container"
        "aside" 
        "encryption-area-container";
        aside {
            grid-area: aside;
            display: flex;
            flex-direction: column;
            form {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
                label {
                    font-size: 2rem;
                }
                input {
                    width: 6%;
                    font-size: 1.2rem;
                }
                textarea {
                    font-size: 1.5;
                }
            }
        }
        .encryption-area-container {
            align-items: center;
            textarea {
                width: 90%;
                height: 90%;
                font-size: 1.5rem;
            }
        }
    }
    footer {
        height: 5vh;
        p {
            padding: 1rem;
            color: rgba(0, 0, 0, 0.5);
            font-size: 1.5rem;
            a:hover {
                cursor: pointer;
                text-decoration: 1px line-through solid black;
            }
        }
    }
}

8 Replies

Zoë•2y ago

Firstly I can recommend https://www.youtube.com/watch?v=veEqYQlfNx8 Secondly I'm going to have a look

Kevin Powell

YouTube

The problems with viewport units

Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts Join the Discord: https://kevinpowell.co/discord Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...

Zoë•2y ago

It might help to have the html Ohh I see the issue you have

  width: 100vh;
  height: 100vh;

  width: 100vh;
  height: 100vh;

and that makes a square I assume you zoomed out when you took the screenshot as it should be off the page to the sides

jj_roby_1993OP•2y ago

ha, yes i did right so is that overflow?

Zoë•2y ago

You just don't want to set a width (it already tries to take up the full width) Watch the video I linked, Kevin explains it well on what you should do

jj_roby_1993OP•2y ago

well, in the code before the media query, that's for larger screens, I have the width set to 60% so for mobile want to take up the whole width

Zoë•2y ago

You can use width:unset or width:initial

jj_roby_1993OP•2y ago

ill check out the vid ok, so i tried width: 100%; and width: unset; , width: initial;, still zoomed in and not taking up the whole height thanks for the video, looks like exactly what im looking for

Zoë•2y ago

https://codepen.io/z-/pen/NWOgyqg/d77075d08ba955af39762368a70b7f77?editors=1100 Replicated it and it works Just a couple things to note, you generally want to use pixels rather than rem if it doesn't involve text, and you can add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head to make things more consistent when using pixels. Secondly just using raw percentages/viewport sizes is a little messy. You're better off just having a fixed width which caps at 100% so if it goes smaller then it shrinks then. This is so you avoid your content being squished when there's space on the sides. If you want space on the sides you can use width:calc(60% + 300px) (tweak the values) and it will give you the empty sides but will be full screen at smaller widths

Zed Dash

CodePen

jj_roby

...

Gaming

Programming

CSS Media Queries