Home The mobile view of my website has a zoom out enabled and doesn't take full width, infact it has a horizontal scroll which i want to avoid, what to do?

Questions

The mobile view of my website has a zoom out enabled and doesn't take full width, infact it has a horizontal scroll which i want to avoid, what to do?

byMR

August 28, 2023

Mobile view of my website has horizontal scroll because it doesn’t occupy 100% of the width even if it does show okay on refresh, but when you zoom-out you will see that it has too many blank space on the right, How do i avoid that?

Here is my html code –

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive CSS Grids</title>
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="index-dark.css" />
    </head>
    <body>
     <div class="main-container">
      <div class="item box1"><h1>To Test this Site...</h1></div>
      <div class="item box2"><h2>just slide down...</h2></div>
      <div class="item box3">
        <img src="scapiafront.png" alt="cardfrontpic" />
      </div>
      <div class="item box4">
        <img src="scapiaback.png" alt="cardbackpic" />
      </div>
      <div class="item box5"><img src="scapiacard.png" alt="cardpic" /></div>
      <div class="item box6"><img src="scapia.png" alt="cardlogopic" /></div>
      <div class="item box7"><img src="scapiafont.png" alt="fontpic" /></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js"></script>
    <script src="index.js"></script>
     </body>
    </html>

Here is my CSS code –

 


      body {
  overflow-x: hidden;
    }

      .main-container {
    display: grid;
    grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    height: 97vh;
    grid-template-areas:
      "box1 box1 box1 box1"
      "box2 box3 box3 box3"
      "box2 box4 box5 box6"
       "box2 box7 box7 box7";
     gap: 0.2rem;
    }

    .item {
    border-radius: 10px;
    }

    .box1 {
    background-color: violet;
     grid-area: item-1;
     min-height: 50px;
     display: flex;
     text-align: center;
     align-items: center;
     justify-content: center;
     }

    .box2 {
  background-color: indigo;
  grid-area: item-2;
  min-height: 50px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: azure;
    }

     .box3 {
   background-color: blue;
  grid-area: item-3;
  height: 630px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

     .box4 {
  background-color: green;
  grid-area: item-4;
  height: 800px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

      .box5 {
  background-color: yellow;
  grid-area: item-5;
  height: 800px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

     .box6 {
  background-color: orange;
  grid-area: item-6;
  height: 800px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

     .box6 img{
  max-width: 300px;
}

     .box7 {
  background-color: red;
  grid-area: item-7;
  height: 800px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

     .box7 img {
  max-width: 300px;
}


     @media screen and (max-width: 500px) {
  .main-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "box1"
      "box2"
      "box3"
      "box4"
      "box5"
      "box6"
      "box7";
  }

}

Here is my JS code –




      const darkThemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
       const toggleTheme = () => {
  const themeStylesheet = document.querySelector('link[href="index-dark.css"]');
  if (darkThemeQuery.matches) {
    themeStylesheet.disabled = false; // Enable dark theme
  } else {
    themeStylesheet.disabled = true; // Enable light theme
  }
};

      darkThemeQuery.addEventListener("change", toggleTheme);

        toggleTheme();

       gsap.registerPlugin(ScrollTrigger);

      gsap.from(".box3", { opacity: 0, y: 100, delay: 1, duration: 1, });

     gsap.from(".box4 img", {
  opacity: 0,
  x: 300,
  duration: 3,
  scrollTrigger: {
    trigger: ".box4 .img",
    start: "30% 20% ",
    end: "top 80%",
    scrub: 1,  },
});

       gsap.from(".box5 img", {
  opacity: 0,
  x: -300,
  duration: 3,
  scrollTrigger: {
    trigger: ".box5 img",
  },
});

        gsap.from(".box6 img", {
  opacity: 0,
  x: 300,
  duration: 3,
  scrollTrigger: {
    trigger: ".box6 img",
  
  },
});

       gsap.from(".box7 img", {
  opacity: 0,
  x: -300,
  duration: 3,
  scrollTrigger: {
    trigger: ".box7 img",
    
  },
});

How do i avoid this?

The live version of the site is there on responsivegrids.vercel.app
(Open it in Phone and you will notice the issue or in chrome screen size tools)

I tried AI Help but it wasn’t helpful,

I tried meta scale changes but no changes,

i also tried overflow-x but as you can see not much help.

My guess is the animation may be at fault here but even after stopping it, the issue is still there.

>Solution :

You should be able to fix your example by applying these styles:

body {
    margin: 0; /* reset the margin */
    padding: 8px; /* apply padding same as margin */
    box-sizing: border-box;
}
.item {
    overflow: hidden; /* used to hide content once translated */
}