Web Page rendering with space on the right when at smaller screen widths?

Web Development Front-End
1

Not sure where was best to ask about this - I am trying to create a responsive web page and have just got to implementing some media queries.

In Chrome Dev Tools, i’ve noticed that reducing the screen width below a certain point seems to make introduce a column of space on the right of the page, with the HTML area to the left of this. The header seems to extend through the space as do some other elements, I dont know why HTML is shrinking.

Screenshot 2023-01-30 at 18.51.04
Screenshot 2023-01-30 at 18.51.041196×1474 68.1 KB

My CSS code is as below:

/* Colors for the Website:

    1.) A8C2A5 - laurel Green
    2.) E2E2E2 - Platinum
    3.) CBAB95 - Tumbleweed
    4.) A8826B - Beaver

*/


/*Global Styling*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 20px;
    font-family: cursive;
}

html{
    background-color: #e2e2e2;
    width: 100%;
}
/*header section*/
.banner{
    height: 4rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #e2e2e2;
    position: fixed;
    z-index: 100;
    border-bottom: 0.2rem solid black;
}

#company-logo{
    padding-left: 1.5rem;
    font-family: 'Pacifico', cursive;
}

#company-logo h1{
    font-size: 1.75rem;
    font-weight: 200;
}

.navigation.desktop{
    padding-right: 1.5rem;
}

nav ul li{
    display: inline;
    padding-right: 0.75rem;
    font-family: 'Satisfy', cursive;
}

nav ul{
    display: flex;
    align-items: center;
}

.navigation a{
    text-decoration: none;
}

.navigation li img{
    height: 1.5rem;
}

/*Top Banner Section*/

.Container-1{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 30rem; /*Note: 4 Rem of this is hidden behind the fixed header*/
    background-image: url(../Images/Puppy_Header.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.Company-Header{
    /*border: 1px solid black;*/
    height: 10%;
    width: 40%;
    margin-top: 4.5rem; /*Offset for the fixed header*/
}

.Company-Header h2{
    font-family: 'Satisfy', cursive;
    text-align: center;
    font-size: 2rem;
}

.Mailing-List{
   /*border: 1px solid black;*/
    height: 15%;
    width: 22%;
    margin-bottom: 1rem;
}

.Mailing-List .button{
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.5rem;
    background-color: bisque;
    opacity: 0.8;
    height: 100%;
    width: 100%;
    color: black;
    text-decoration: none;
    box-shadow: 0 0.45rem #999;
}

.button {
    transition-duration: 0.4s;
  }
  
.button:hover{
    background-color: rgb(255, 198, 128);
    color: white;
}

.button:active {
    background-color: rgb(255, 178, 84);
    box-shadow: 0 0.25rem #666;
    transform: translateY(4px);
  }

  @media only screen and (max-width: 1000px){
    .Mailing-List{
        /*border: 1px solid black;*/
         height: 15%;
         width: 35%;
         margin-bottom: 1rem;
     }
}


/*Puppies Section*/
.Container-2{
    display: flex;
    justify-content: space-around;
    /*border: 1px solid black;*/
    flex-wrap: wrap;
    border-bottom: 0.2rem solid black;
}
.puppies-title h2{
    font-size: 2rem;
    margin: 1rem 0;
    text-align: center;
    font-family: 'Pacifico', cursive;
    font-weight: 100;
}
.image{
    height: 18rem;
    width: 26rem;
    /*border: 1px solid black;*/
    margin: 1rem;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.image p{
    font-size: 2rem;
}

.puppy1{
    background-image: url(../Images/Cavapoo-1.avif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #e2e2e2;
}

.name{
    align-self: flex-start;
    margin-left: 2rem;
    margin-top: 2rem;
}

.puppy2{
    background-image: url(../Images/Cavapoo-2.avif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.puppy3{
    background-image: url(../Images/Cavapoo-3.avif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.puppy4{
    background-image: url(../Images/Cavapoo-4.avif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-position-y: -5rem;
}


.puppy5{
    background-image: url(../Images/Cavapoo-5.avif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-position-y: -2rem;
}

.puppy5 .name{
    align-self: flex-end;
    margin-right: 2rem;
    margin-top: 2rem;
}

/*Team Info Section*/
.Team-Info{
    text-align: center;
    margin: 1rem;
    font-size: 2rem;
    font-family: 'Satisfy', cursive;
}
.Container-3{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-around;
    height: 20rem;
    border-bottom: 0.2rem solid black;
}

.Info{
    width: auto;
    height: auto;
    display: flex;
    margin-top: 1rem;
}

.mugshot{
    height: 100%;
    width: 50%;
    display: flex;
    align-items: flex-start;
}

.mugshot img{ 
    width: 100%;
    max-height: 100%;
}

#James{
    flex: 1;
    order: 3;
}

#Jess{
    flex: 1;
    order: 2;
}

#Cornelius{
    flex: 1.5;
    order: 1;
}

.Person-Detail{
    display: flex;
    flex-direction: column;
    width: 50%;
}

.Name{
    margin-top: 1rem;
    align-self: flex-start;
    margin-left: 0.5rem;
}

.Education, .Education p{
    margin-top: 1rem;
    font-size: 0.8rem;
    align-self: flex-start;
    margin-left: 0.5rem;
}

/*Footer*/
footer{
    display: flex;
    justify-content: space-between;
}

.footer-2{
    align-self: flex-end;
}

.footer-1 li, .footer-2 p{
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.8rem;
}

My HTML is here:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Resources/CSS/style.css">
    <!--Font Import Start-->
    <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=Pacifico&family=Satisfy&display=swap" rel="stylesheet">
    <!--Font Import End-->
    <title>Cavapoo's R Us</title>
</head>
<body>
    <!--The top bar of the website-->
    <header>
        <div class="banner">
            <div id="company-logo">
                <h1>Cavapoos R Us</h1>
            </div>
            <div class="navigation desktop">
                <nav>
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Breeding</a></li>
                        <li><a href="#">Insta</a></li>
                        <li><img src="Resources/Images/Facebook.png" alt="Facebook Logo"></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <!--The Main Title Area-->
    <div class="Container-1">
        <div class="Company-Header">
            <h2>Say hello to my little fren!</h2>
        </div>
        <div class="Mailing-List">
            <button class="button">Subscribe to Our Mailing List!</button>
        </div>
    </div>
        <!--Our Puppies Section-->
    <section class="puppies">
        <div class="puppies-title">
            <h2>Our Current Puppies</h2>
        </div>
        <div class="Container-2">
            <div class="image puppy1">
                <!--<img src="Resources/Images/Cavapoo-1.avif" alt="Cavapoo Puppy">-->
                <div class="name"><p>Billie</p></div>
            </div>
            <div class="image puppy2">
                <!--<img src="Resources/Images/Cavapoo-2.avif" alt="Cavapoo Puppy">-->
                <div class="name"><p>Bobby</p></div>
            </div>
            <div class="image puppy3">
                <!--<img src="Resources/Images/Cavapoo-3.avif" alt="Cavapoo Puppy">-->
                <div class="name"><p>Boppy</p></div>
            </div>
            <div class="image puppy4">
                <!--<img src="Resources/Images/Cavapoo-4.avif" alt="Cavapoo Puppy">-->
                <div class="name"><p>Toppy</p></div>
            </div>
            <div class="image puppy5">
                <!--<img src="Resources/Images/Cavapoo-5.avif" alt="Cavapoo Puppy">-->
                <div class="name"><p>Hoppy</p></div>
            </div>
        </div>
    </section>
    <!--Team Info Section-->
    <section>
        <h2 class="Team-Info">Meet the Team</h2>
        <div class="Container-3">
            <div id="James" class="Info">
                <div class="mugshot"><img src="Resources/Images/James.avif" alt="James"></div>
                <div class="Person-Detail">
                    <div class="Name"><h3>James Mcmuffin</h3></div>
                    <div class="Education"><p>Grooming Master</p><p>Handler Extraordinaire</p></div>
                </div>
            </div>
            <div id="Jess" class="Info">
                <div class="mugshot"><img src="Resources/Images/Jess.avif" alt="Jess"></div>
                <div class="Person-Detail">
                    <div class="Name"><h3>Jess "The Reader"</h3></div>
                    <div class="Education"><p>Dog Psychologist</p><p>Qualified Trainer</p></div>
                </div>
            </div>
            <div id="Cornelius" class="Info">
                <div class="mugshot"><img src="Resources/Images/Cornelius.avif" alt="Cornelius"></div>
                <div class="Person-Detail">
                    <div class="Name"><h3>Cornelius Woofington</h3></div>
                    <div class="Education"><p>The Boss</p><p>The Master Puppyteer</p></div>
                </div>
            </div>
        </div>
    </section>
    <!--Site Footer-->
    <footer>
        <div class="footer-1">
            <ul>
                <li>Contact: [email protected]</li>
                <li>Telephone: 01234 567890</li>
            </ul>
        </div>
        <div class="footer-2">
            <p>Copyright: Cavapoo's R Us 2023</p>
        </div>
    </footer>

</body>
</html>

Can anyone shed some light?

2

I had a similar issue. A question on Stack Overflow recommended adding the following styles to the top of the stylesheet and it fixed the issue for me:

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}```
3

It’s possible that the issue you’re experiencing is due to the width property set on the HTML element. When you set the width to 100%, it includes any padding or margins that are applied to the element, which could be causing the column of space on the right side of the page.

You can try removing the width property on the HTML element and instead using the following CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background-color: #e2e2e2;
  font-size: 20px;
  font-family: cursive;
}

/* Rest of your CSS styles */

This will set the body element to have a height of 100% and remove any default margins or padding. Then you can style your HTML and body elements separately from there.

Additionally, you can try adding the following meta viewport tag to the head of your HTML file:

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

This will help ensure that your page is responsive on mobile devices.

Hope this helps! :slight_smile: