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.
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?