CODEWITHSUNDEEP
css
nCardot
nCardot

Reputation: 6587

Page not scaling to fit the viewport on mobile, can't be zoomed out

I can't figure out why my page isn't fitting to the viewport in mobile view. You can scroll the page but can't zoom out to fit the full page.

View CodePen

I have <meta name="viewport" content="width=device-width, initial-scale=1.0"> in the head (this is just for clarity; CodePen adds it automatically).

My media query for mobile changes the page from a two to one column layout with CSS grid. Here is the full mobile media query:

@media screen and (max-width: 767px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 40rem auto auto 50rem auto auto auto 42rem auto auto;

    grid-template-areas:
      "header"
      "image"
      "intro"
      "pricing"
      "portrait"
      "about"
      "banner"
      "contact"
      "banner2"
      "video"
      "footer";
  }

  header {
    justify-content: center;
  }

  nav ul {
    display: none;
  }

  .logo {
    height: 3.5rem;
    padding: 0.1rem 1.9rem 0 0;
  }

  .intro-text {
    padding: 2rem 4rem 2rem 4rem;
  }

  .pricing-levels {
    flex-direction: column;
  }

  .pricing-levels:last-child {
    margin-bottom: 4rem;
  }

  .pricing-level {
    margin: 1.5rem auto;
    padding: 3rem;
    width: 75%;
  }

  .pricing-level:first-child {
    margin-top: 0;
  }

  .about-text {
    margin-bottom: 3rem;
  }

  .banner {
    /* Mobile-only image; better fit */
    background-image: url(https://github.com/nataliecardot/landing-page/blob/master/img/couple-heart.jpg?raw=true);
    background-position: center;
  }

  .banner-text {
    font-size: 3rem;
    margin: 15rem 0;
  }

  form {
    text-align: center;
  }

  .form-left {
    width: 85%;
    padding-right: 0;
    text-align: left;
    font-weight: bold;
  }

  .form-right {
    width: 85%;
    margin-top: 1.2rem;
  }

  .form-item {
    margin: 1rem 0;
  }
}

I tried adding max-width: 100% to body and html, but it didn't do anything. Also, I have another page with very similar code (the main difference is the row with the iframe) for which this isn't happening. I compared the files with a diffs tool and couldn't find any difference that could account for the problem.

I have checked the similar questions and they did not have useful answers.

Additionally, the problem does not occur for tablets with my other media query.

Upvotes: 1

Views: 389

Answers (1)

d-h-e
d-h-e

Reputation: 2548

One problem is your video iframe. It's not responsive.

iframe#video {
    max-width: 100%;
}

Edit:

The second reason for the vertical scrollbar is the header. The content of the header is to wide for mobile view.

I have added a overview: hidden to the header to demonstrate it.

=> https://codepen.io/anon/pen/XGgPWY

Upvotes: 2

Related Questions