What do I need to add to my media queries to have my website take up 100% of the viewport on a mobile device?

Question

When I go on my website on desktop, everything runs smoothly. However, on mobile, my website only uses half the viewport.

I've asked friends and family to try going on my website, and they get the same result as I do (I use iPhone 5s, and they use later versions of iPhone).

I've tried a few different browsers (Safari, Chrome and DuckDuckGo). They all yield the same unwanted result.

I've tried changing the media queries by having the body have a width property of 100% on smaller devices. Nothing changed.

I changed my meta tag from:

<meta name="viewport" content="width=device-width, initial-scale=1.5">

to:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The layout looks a little tidier but it still only takes up half the viewport.

Below is the responsive part of my CSS file probably containing the root of the problem.

// general styles
body {
font: 400 14px 'Poppins', sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 30px;
color: #727272;
font-size: 16px;
font-weight: 300;
overflow-x: hidden;
width: 100%; 
margin: 0;

}

@media (min-width:1920px) {
    .name-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 122px;
        top: 90px;
    }
    .about-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 702px;
        top: -60px;
    }
    .portfolio-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 897px;
        top: 179px;
    }
    .blog-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 1092px;
        top: 518px;
    }
    .contact-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 1386px;
        top: 138px;
    }
    .name-block.reverse {
        width: 400px;
        left: 300px;
    }
    .content-blocks,
    .content-blocks.pop.showx,
    .inline-menu-container,
    .close-pop {
        width: 1024px;
        left: auto;
        right: 0;
    }
}

@media (min-width:1280px) and (max-width:1919px) {
    .name-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: -190px;
        top: 10px;
    }
    .about-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 382px;
        top: -151px;
    }
    .portfolio-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 577px;
        top: 89px;
    }
    .blog-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 772px;
        top: 428px;
    }
    .contact-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 1067px;
        top: 48px;
    }
}

@media (max-width:1280px) {
    .inline-menu-container,
    .close-pop {
        right: 0;
        width: 70%;
    }
}

@media (min-width:1025px) and (max-width:1280px) {
    .name-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: -200px;
        top: -80px;
    }
    .about-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 419px;
        top: -160px;
        width: 350px;
        height: 300px;
    }
    .portfolio-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 586px;
        top: 88px;
        width: 350px;
        height: 300px;
    }
    .blog-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 753px;
        top: 335px;
        width: 350px;
        height: 300px;
    }
    .contact-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 900px;
        top: -70px;
        width: 350px;
        height: 300px;
    }
}

@media (min-width:981px) and (max-width:1024px) {
    .name-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: -190px;
        top: 10px;
    }
    .about-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 382px;
        top: -150px;
    }
    .portfolio-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 577px;
        top: 89px;
    }
    .blog-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 772px;
        top: 428px;
    }
    .contact-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 365px;
        top: 538px;
    }
}

@media (max-width:1024px) {
    .name-block-container h1 {
        font-size: 40px;
        line-height: 1.1;
    }
    .name-block-container h1 span,
    .name-block-container h2 {
        font-size: 22px;
        min-height: 22px;
    }
    .menu2 .name-block {
        padding: 0 0 0 20px;
    }
    .menu2 .name-block-container h1 {
        font-size: 50px;
    }
    .menu2 .name-block-container h1 span,
    .menu2 .name-block-container h2 {
        font-size: 26px;
        min-height: 26px;
    }
    .inline-menu-container {
        font-size: 14px;
        right: 10px;
        width: 69%;
    }
    .inline-menu li {
        padding: 0 10px;
    }
    .content {
        padding: 120px 50px 50px;
    }
}

@media (min-width:768px) and (max-width:980px) {
    .name-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: -190px;
        top: 10px;
    }
    .about-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 382px;
        top: -150px;
    }
    .portfolio-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 577px;
        top: 89px;
    }
    .blog-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 336px;
        top: 548px;
    }
    .contact-block {
        -ms-transform: rotate(-34deg);
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        left: 9px;
        top: 780px;
    }
    .project {
        width: 50%;
    }
}

@media (max-width:980px) {

    .inline-menu {
        margin-top: 5px;
    }

    .timeline:before,
    .timeline:after,
    .exp:after {
        display: none;
    }

    .exp-holder {
        margin-top: 0;
    }

    .exp {
        padding-left: 0;
    }
    .awards img {
        opacity: 1;
    }
}

@media (max-width:800px) and (orientation:landscape) {
    .home {
        background: url(../images/bg.jpg) #333 30% 30%;
        overflow-y: scroll;
    }
    .name-block,
    .about-block,
    .portfolio-block,
    .blog-block,
    .contact-block {
        position: relative;
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        width: 100%;
        height: auto;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        display: table;
        left: 0;
        top: 0;
    }
    .contact-block {
        border-bottom: none;
    }
    .name-block-container,
    .about-block-container,
    .portfolio-block-container,
    .blog-block-container,
    .contact-block-container {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        padding: 0 0 0 0;
    }
    h2.menu-item {
        line-height: 3em;
        margin-bottom: 0;
        display: block;
    }
    h2.menu-item:after {
        position: absolute;
        content: '';
        top: 15px;
        left: -20px;
        width: 70px;
        height: 1px;
        background: #FFF;
        transition: all 0.5s ease;
    }
    .social {
        position: relative;
        margin: 50px 0;
    }
    .inline-menu-container {
        width: 100%;
        left: 0;
    }
    .content-blocks {
        height: 100vh;
    }
}

@media (max-width:800px) {
    #lionhero {
        height: 100vh;
        position: fixed;
    }
    #lionhero .owl-nav {
        display: none;
    }
    .menu2 .social {
        bottom: 0;
    }
    .sidebar-menu,
    .home-container {
        left: 0;
        top: 0;
        width: 100%;
    }
    .sidebar-menu {
        height: 50px;
        z-index: 1;
    }
    .sidebar-menu.hidex {
        top: -60px;
    }
    .menu4 .inline-menu {
        position: relative;
        text-align: center;
        margin-top: 0;
        width: 100%;
    }
    .menu4 .inline-menu li {
        color: #f5f5f5;
        font-size: 16px;
        display: inline-block;
        line-height: 50px;
        padding: 0 10px;
    }
    .name-block {
        padding-top: 30px;
    }
    .name-block,
    .about-block,
    .portfolio-block,
    .blog-block,
    .contact-block {
        position: relative;
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        width: 100%;
        height: auto;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        display: table;
        left: 0;
        top: 0;
    }
    .contact-block {
        border-bottom: none;
    }
    .about-block:hover,
    .portfolio-block:hover,
    .blog-block:hover,
    .contact-block:hover {
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }
    .name-block-container,
    .about-block-container,
    .portfolio-block-container,
    .blog-block-container,
    .contact-block-container {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        padding: 0 0 0 0;
    }
    h2.menu-item {
        line-height: 3em;
        margin-bottom: 0;
        display: block;
    }
    h2.menu-item:after {
        position: absolute;
        content: '';
        top: 15px;
        left: -20px;
        width: 70px;
        height: 1px;
        background: #FFF;
        transition: all 0.5s ease;
    }
    .menu-block:hover h2.menu-item:before {
        top: -40px;
        left: -20px;
    }
    .menu-block:hover h2.menu-item:after {
        top: 15px;
        left: -20px;
    }
    .menu-block:hover {
        background: rgba(0, 0, 0, 0);
    }
    .social {
        position: relative;
        margin: 50px 0;
    }
    .menu4 .social {
        bottom: 0;
    }
    .menu4 .content-blocks,
    .content-blocks {
        width: 100%;
        left: 0;
    }
     .menu4 .content-blocks.pop {
        left: 100%;
    }
    .menu4 .content-blocks.pop.showx,
    .content-blocks.pop.showx {
        left: 0;
    }
    .menu4 .close-pop,
    .close-pop {
        right: 0;
        width: 100%;
    }
    .inline-menu-container {
        width: 100%;
        left: 0;
    }
}

@media (max-width:767px) {
    .home {
        overflow-y: scroll;
    }
    .home .bgScroll {
        animation: none;
        height: 100%;
    }
    .menu2 .name-block-container h1 {
        font-size: 40px;
    }
    .menu2 .name-block-container h1 span,
    .menu2 .name-block-container h2 {
        font-size: 22px;
        min-height: 22px;
    }
    .status {
        display: none;
    }
    .content {
        padding: 100px 20px 50px;
    }
    .content-blocks.pop.showx {
        top: 0;
    }
    .content-blocks.pop.showx {
        height: 100vh;
    }
    .menu4 .name-block.reverse {
        padding-left: 0;
    }
    .exp .hgroup h4,
    .exp .hgroup h5 {
        display: table;
    }
    .exp .hgroup h5 {
        padding-left: 0;
    }
    .exp .hgroup h5:before {
        display: none;
    }
    .filters span {
        display: none;
    }
    .filters ul li {
        font-size: 14px;
        padding: 2px 5px 2px 0;
    }
    .name-block-container h1 span {
        font-size: 22px;
    }
    .name-block-container h1 {
        font-size: 36px;
    }
    .name-block-container h2 {
        font-size: 22px;
        min-height: 22px;
    }
    h2.menu-item {
        font-size: 20px;
        line-height: 2em;
        margin: 25px 0 25px 40px;
    }
    h2.menu-item:before {
        position: absolute;
        top: -20px;
        left: -20px;
        font-size: 14px;
    }
    .menu-block:hover h2.menu-item:before {
        top: -20px;
        left: -20px;
    }
    h2.menu-item:after {
        display: none;
    }
    .social {
        display: none;
    }
    .project {
        width: 100%;
    }

    .home {
        width: 50%;
    }
}

@media (max-width:640px) {
    .author-box .col-sm-2,
    .author-box .col-sm-10 {
        width: 100%;
        text-align: center;
    }
    .author-box img {
        display: block;
        margin: 0 auto 30px;
        width: 150px;
    }
    .comments-list .children {
        padding-left: 0;
    }

}

@media (max-width:576px) {
    .menu4 .inline-menu li {
        font-size: 14px;
        padding: 0 7px;
    }
    .single-post-title h1 {
        font-size: 40px;
    }
    .comment .col-sm-2 {
        width: 16.6667%;
    }
    .comment .col-sm-10 {
        width: 83.3333%;
    }
}

@media (max-width:375px) {
    .home {
        position: relative;
    }
    .menu4 .home {
        height: 100vh;
    }
}

@media (max-width:360px) {
    #blog-social li:first-child {
        display: block;
    }
    .comment .col-sm-2 {
        padding: 0;
    }
}

@media (max-width:320px) {
    .inline-menu {
        margin-right: 0;
    }
    .inline-menu li {
        padding: 0 8px;
    }
    .menu4 .inline-menu li {
        padding: 0 5px;
    }
    .filters ul li {
        margin-left: 5px;
    }
    .project-nav span {
        display: block;
        width: 100%;
    }
}

The goal is to have my website take up 100% of the viewport and to look pretty much how it does on desktop. My domain is harrisongreeves.com

You need to provide a [mcve], not a *huge* chunk of CSS with no accompanying HTML. — Quentin, Jun 22 '19 at 11:47
The before and after versions of your meta viewport appear to be identical — Quentin, Jun 22 '19 at 11:48
You could provide an example. And without more code I can only ask if you have in your styles something like this: html, body { width: 100%; margin: 0 }. Nothing on the media queries restrict the viewport. Unless you have a container element. Also why use 1.5 on initial scale instead of 1.0? — Sachi Cortes, Jun 22 '19 at 11:55
@Quentin Yeah I know it's too much code. Sorry about that. Thing is, it's not my code and I have no specific idea where the error would be. The meta viewport comparisons are no longer identical. — Harrison, Jun 22 '19 at 12:23
@SachiCortes What kind of example? I'm not sure what you mean. Above I've included the general styles of my body. I've included your suggested code and nothing has changed in regards to the viewport on mobile. It was 1.5 initially because it's not my code. It's the code of a website template I bought online. — Harrison, Jun 22 '19 at 12:32

score 0 · Answer 1 · answered Jun 22 '19 at 11:53

0

in outsider div or with something you can give margin:0; width:100vw; That make fits your css into any the screen

answered Jun 22 '19 at 11:53

Handelika

198
3
11

Could you be more specific in terms of where I'm supposed to place that code? Thank you :) – Harrison Jun 22 '19 at 12:34
if you define in body it covers all your css tags. for example in media ```@media (max-width:981px){body{margin:0; width:100vw;}}``` body covers all page. – Handelika Jun 22 '19 at 13:04
I've added it to body but nothing has changed unfortunately. – Harrison Jun 22 '19 at 15:09
would you send your html and screenshot of problem. also in body you have two line-height property. – Handelika Jun 22 '19 at 16:10
I can't send you the HTML because of the world limit on Stack Overflow. But you can see the HTML if you press CTRL U on my website: harrisongreeves.com. Also if you type my domain into a browser on mobile you'll be able to see the problem immediately. – Harrison Jun 23 '19 at 04:52
1

I've taken out one of the line-height properties. Thanks for that find. – Harrison Jun 23 '19 at 05:06
I assume you have problem in background picture. You can use background-size property for full background picture. in section css you can add this ```background-size:100% 100%``` – Handelika Jun 23 '19 at 21:37

score 0 · Answer 2 · answered Jun 23 '19 at 11:13

0

You've given 50% width to .home for @media (max-width:767px), which is the reason why your content is shrinking to 50%.

Get rid of it or make it to 100% and you'll be good to go! You might have to reposition your background though after that.

Hope it helps. Cheers!

answered Jun 23 '19 at 11:13

AdityaSrivast

1,028
1
10
16

I have no idea who you are but I love you. – Harrison Jun 23 '19 at 14:18
It works, I don't know how I missed that. Do you know how to re-align the background image so that it fits my face into the screen on mobile? Thank you. – Harrison Jun 23 '19 at 14:29
@Harrison refer:https://stackoverflow.com/questions/12609110/responsive-css-background-images – AdityaSrivast Jun 23 '19 at 17:50
I applied 4 or 5 of the code snippets on there to my .home class but nothing has changed. Strange. – Harrison Jun 25 '19 at 04:35

What do I need to add to my media queries to have my website take up 100% of the viewport on a mobile device?

2 Answers2