on my website in pc mode, the layout is perfect, it is also perfect on all the smaller screen devices, but i have one problem, there is a lot of blank black space on the right side after i start scrolling in the smaller screen devices, there is no content there also, but if i scroll all the way to the left, everything is perfect as i have adjusted it using media queries. Can someone tell me how to get rid of the blank space and keep the content fit to the screen?
Here's my code:
*PLAYER PAGE*/
.container {
padding: 2.5em 1.25em 0;
margin: 0 auto;
border-bottom: 0.125em solid rgb(105, 105, 105);
border-width: 100%;
padding-bottom: 1.25em;
}
h1 {
margin: 0;
text-align: center;
font-size: 3.125em;
overflow: hidden;
line-height: 1;
color: white;
}
h1 span {
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}
.meet-the-owner h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 1.5625em;
font-family: "BatmanForeverAlternate";
}
.meet-the-owner-top h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 1.5625em;
font-family: "BatmanForeverAlternate";
padding: 2.5em;
}
.luxxreno {
text-align: left;
position: relative;
left: 25em;
padding-top: 5em;
bottom: 9.375em;
width: 100%;
}
.luxxreno img {
border-radius: 50%;
width: 39.5em;
padding-bottom: 0.625em;
position: relative;
top: 3em;
}
.meet-the-owner {
padding: 3.125em;
border-top: 0.125em solid rgb(105, 105, 105);
}
.q-l {
color: white;
display: inline-block;
flex: right;
text-align: left;
position: relative;
left: 18.75em;
bottom: 0.625em;
font-size: 1.3125em;
}
.questions p {
padding: 0.625em;
position: relative;
top: 1.875em;
}
.luxx-name {
font-family: "BatmanForeverAlternate";
padding-bottom: 2.1875em;
position: relative;
left: 0.2em;
font-size: 3.125em;
top: 1.9em;
}
.owner {
font-family: "BatmanForeverAlternate";
position: relative;
left: 0.4em;
color: red;
}
.luxx-socials {
position: relative;
left: 0.5625em;
top: 3.125em;
}
.luxx-socials ul li {
padding: 0.625em 1.875em;
position: relative;
top: 15px;
list-style-type: none;
display: inline-block;
right: 30px;
font-family: "BatmanForeverAlternate";
font-size: 25px;
color: #ffd700;
transition: 0.5s;
}
.luxx-socials ul li a {
text-decoration: none;
}
.luxx-socials ul a li:hover {
color: red;
}
@keyframes reveal {
0% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}
@media screen and (max-width: 1799px) {
/*MEDIA FOR MENU BUTTON*/
.nav-links ul li {
display: block;
}
.nav-links {
position: fixed;
background: #ffd700;
height: 100vh;
width: 12.5em;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
}
nav .fas {
display: block;
color: black;
margin: 1.625em;
font-size: 1.375em;
cursor: pointer;
position: relative;
right: 0.6em;
}
.nav-links ul {
padding: 1em;
}
.text-box h1 {
font-size: 4.3em;
}
nav img {
width: 20em;
position: relative;
top: 0.1em;
}
.player-info p {
padding-left: 0;
font-size: 0.8em;
padding-top: 0;
}
}
@media screen and (max-width: 2000px) {
/*INDEX PAGE MEDIA */
body {
overflow-x: none;
}
nav img {
position: relative;
top: 0.2em;
}
nav .fas {
position: relative;
top: 0.2em;
}
.luxxreno img {
width: 280px;
position: relative;
padding-left: 10px;
right: 360px;
}
.meet-the-owner-top h3 {
position: relative;
right: 6px;
}
.container h1 {
position: relative;
right: 10px;
}
.questions {
font-size: 13px;
position: relative;
right: 770px;
top: 50px;
}
.luxx-socials ul {
position: relative;
right: 730px;
top: 25px;
}
.luxx-socials ul li {
font-size: 20px;
}
.luxx-name {
font-size: 40px;
}
}
@media screen and (min-width: 577px) and (max-width: 767px) {
/*INDEX PAGE MEDIA */
nav img {
position: relative;
top: 1.8em;
}
nav .fas {
position: relative;
top: 1.3em;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
/*INDEX PAGE MEDIA */
nav img {
position: relative;
top: 1.8em;
}
nav .fas {
position: relative;
top: 1.3em;
}
}
@media screen and (min-width: 992px) and (max-width: 1055px) {
nav img {
position: relative;
top: 1.6em;
}
nav .fas {
position: relative;
top: 1.1em;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
nav img {
position: relative;
top: 1.5em;
}
nav .fas {
position: relative;
top: 1.1em;
}
}
@media screen and (min-width: 1201px) and (max-width: 1400px) {
nav img {
position: relative;
top: 1.3em;
}
nav .fas {
position: relative;
top: 1.1em;
}
}<html lang="en">
<head>
<script>
ScrollReveal({ reset: true });
</script>
<script src="https://unpkg.com/scrollreveal"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Players | LuxxMob</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/360332bae9.js"
crossorigin="anonymous"
></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="menu-header">
<nav>
<a href="index.html"><img src="images/HD_FILE (2).png" /></a>
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="news.html">News</a>
</li>
<li>
<a href="players.html">Players</a>
</li>
<li>
<a href="partners.html">Partners</a>
</li>
<li>
<a href="about-us.html">About Us</a>
</li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<!--END OF NAV-->
<section class="player-bios">
<div class="container">
<h1>
<span>Players</span>
</h1>
</div>
<div class="meet-the-owner-top">
<h3>Meet the Owner</h3>
</div>
<div class="luxxreno">
<img src="images/luxx.jpg">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">LUXX RENO</h2>
<h2 class="owner">OWNER</h2>
<p>Real Name: <b>Cory George</b></p>
<p>Online Name: <b>Luxx Reno</b></p>
<p>First Game Played as a Kid: <b>Duck Hunter/Super Nintendo</b></p>
<p>Game I'm Best At: <b>Fortnite</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <br><b>Mimicry, so I'd be able to mimic and super power I see.</b></p>
<p>Favourite Artist of All Time: <b>Billy Raffoul</b></p>
<p>Hidden Talents: <b>Won lots of medals for swimming!</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCPqsHNuWTAbckHg4R3WAJIg" target=”_blank”><li>487 @ YouTube</li></a>
<a href="https://www.instagram.com/luxxreno/?hl=en" target=”_blank”><li>2.6k @ Instagram</li></a>
<a href="https://www.twitch.tv/luxxreno" target=”_blank”><li>3k @ Twitch</li></a><br>
<a href="https://twitter.com/LuxxReno" target=”_blank”><li>2.5k @ Twitter</li></a>
<a href="https://www.tiktok.com/@luxxxreno?lang=en&is_copy_url=1&is_from_webapp=v1" target=”_blank”><li>657k @ TikTok</li></a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Creator</h3>
</div>
<div class="luxxreno">
<img src="images/abz-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">ABZZINO</h2>
<h2 class="owner">Content Creator</h2>
<p>Real Name: <b>Abdullah Khan</b></p>
<p>Online Name: <b>Abzzino</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty</b></p>
<p>Game I'm Best At: <b>Call Of Duty (all of them)</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <br> <b>Flying</b></p>
<p>Hidden Talents: <b>They're hidden for a reason.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/c/Abzzino/featured" target=”_blank”><li>360 @ YouTube</li></a>
<a href="https://www.instagram.com/_abzzino_/" target=”_blank”><li>193 @ Instagram</li></a>
<a href="https://www.twitch.tv/abzzinok" target=”_blank”><li>2.6k @ Twitch</li></a><br>
<a href="https://twitter.com/_Abzzino_" target=”_blank”><li>142 @ Twitter</li></a>
<a href="https://www.tiktok.com/@abzzinoyt?lang=en" target=”_blank”><li>23.6k @ TikTok</li></a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>COMPETITIVE PLAYER</h3>
</div>
<div class="luxxreno">
<img src="images/kyran-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">KEEZO</h2>
<h2 class="owner">COMPETITIVE PLAYER</h2>
<p>Real Name: <b>Kyran Garden</b></p>
<p>Online Name: <b>KEEZO</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty 3</b></p>
<p>Game I'm Best At: <b>Warzone</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <br> <b>Flying</b></p>
<p>Favourite Artist of All Time: <b>Drake</b></p>
<p>Hidden Talents: <b>I'm good at football.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.twitch.tv/LKeezo" target=”_blank”><li>400 @ Twitch</li></a>
<a href="https://twitter.com/KEEZZ0" target=”_blank”><li>1.2k @ Twitter</li></a>
<a href="https://www.tiktok.com/@kkeezo?lang=en" target=”_blank”><li>1.1k @ TikTok</li></a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Manager</h3>
</div>
<div class="luxxreno">
<img src="images/brad-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">SPODERBRAD</h2>
<h2 class="owner">Content Manager</h2>
<p>Real Name: <b>Brad</b></p>
<p>Online Name: <b>SpoderBrad</b></p>
<p>First Game Played as a Kid: <b>Metal Gear Solid</b></p>
<p>Game I'm Best At: <b>Splitgate</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <br><b>Honestly don’t want a super power just wanna <br> be Iron Man.</b></p>
<p>Favourite Artist of All Time: <br> <b>Drake or Eminem can’t decide</b></p>
<p>Hidden Talents: <b>Best Free Kick Taker on Twitch.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCnqgXWWmmg1F3L919lzT6aQ" target=”_blank”><li>353 @ YouTube</li></a>
<a href="https://www.instagram.com/spoderbrad/?hl=en-gb" target=”_blank”><li>115 @ Instagram</li></a>
<a href="https://www.twitch.tv/SpoderBrad" target=”_blank”><li>2.1k @ Twitch</li></a><br>
<a href="https://twitter.com/SpoderBrad" target=”_blank”><li>392 @ Twitter</li></a>
<a href="https://www.tiktok.com/@spoderbrad?lang=en" target=”_blank”><li>60k @ TikTok</li></a>
</ul>
</div>
</div>
</div>
</section>
<!--FOOTER-->
<footer>
<div class="footer-headers">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="news.html">News</a>
</li>
<li>
<a href="players.html">Players</a>
</li>
<li>
<a href="partners.html">Partners</a>
</li>
<li>
<a href="about-us.html">About Us</a>
</li>
</ul>
</div>
<div class="foot-logo">
<img src="images/HD_FILE (2).png" />
</div>
<div class="socials">
<a href="https://www.tiktok.com/@luxxmob?lang=en"> <i class="fab fa-tiktok"></i></a>
<a href="https://twitter.com/LuxxMob"> <i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com/TheLuxxMob/"> <i class="fab fa-instagram"></i></a>
</div>
<div class="copyright">
<h4>© 2021 LuxxMob</h4>
<h4>Made with ❤ by <a href="https://www.tiktok.com/@truechow?lang=en">@truechow</a></h4>
</div>
</footer>So first of all, you have to find out which element is causing the scroll.
And that is super easy. Simple add this CSS any where in you code. (Preferred place is the index.html)
* {
outline: 1px solid red !important;
opacity: 1 !important;
visibility: visible !important
}
with this code, you will be able to see which element is causing the scroll, and simply either find the root cause or suppress the scroll by
overflow:hidden