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.
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 */
}