Problem with responsive site on mobile

HTML-CSS
1

I’m having some problems creating a responsive mobile website. When I change the dimensions of the site to mobile, there seems to be a lot extra space on the right hand side. The header doesn’t fully align with the main body - for example, when I change the dimensions to iphone 12, the menu bar extends past the main body, hiding the hamburger menu bar unless you scroll to the right. Also, the footer extends past the main body instead of aligning with the main body. I have included my code below.

<!DOCTYPE html>
<html class="html" lang="en">
<meta charset="UTF-8">
<head>
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Title</title>
	<link rel="stylesheet" href="style.css">
	<link rel="main" href="main.js">
	<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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
	<nav>
	<img src="" alt="" class="logo">
	<ul id="menu-links">
		<li>Home</li>
		<li>About Us</li>
		<li>Courses</li>
		<li>Pricing</li>
		<li>Contact</li>
		<li>Blog</li>
	</ul>
	<button class="nav-btn">Get Started </button>
	<img src="menu.png" alt="" class="menu-icon" onclick="toggleMenu()">
</nav>


<div class="header">
	<h1>JOIN US<br>TODAY!</h1>
	<img src="main.png" alt="" class="user-img">
</div>

<footer>
	<div class="container">
		<div class="sec aboutus">
		<h3>About Us</h3>
		<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat quam vel est sodales hendrerit ac sit amet augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque ipsum enim, venenatis at sem ac, facilisis suscipit sapien. </p>
		<ul class="sci">
			<li><a href="#"><img src="facebook.png" alt="facebook"></a></li>
			<li><a href="#"><img src="instagram.png" alt="instagram"></a></li>
			<li><a href="#"><img src="youtube.png" alt="youtube"></a></li>
			<li><a href="#"><img src="twitter.png" alt="twitter"></a></li>
		</ul>
	</div>

		<div class="sec quicklinks">
		<h3>Support</h3>
		<ul>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">Privacy Policy</a></li>
			<li><a href="#">Help</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>

		<div class="sec quicklinks">
		<h3>Shop</h3>
		<ul>
			<li><a href="#">Courses</a></li>
			<li><a href="#">Packages</a></li>
			<li><a href="#">One-on-one</a></li>
		</ul>
	</div>

		<div class="sec contact">
		<h3>Contact Us</h3>
		<ul class="info">
			<li>
				<span><img src="phone.png" rel="phone"><p><a href="#">+1 557 555 7256</a></p></span>
			</li>
			<li>
				<span><img src="mail.png" rel="email"><p><a href="#">websitemaster@email.com</a></p></span>
			</li>
		</ul>
	</div>
</div>


		</footer>
		<div class="copyrightText">
			<p>Copyright 2024 Online Tutorials. All Rights Reserved.</p>
		</div>

<script>
let menuLinks = document.getElementById("menu-links");

function toggleMenu(){
menuLinks.classList.toggle('show-menu');
}

var prevScrollpos = window.pageYOffset;

/* Get the header element and it's position */
var headerDiv = document.querySelector("nav");
var headerBottom = headerDiv.offsetTop + headerDiv.offsetHeight;

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;

  /* if scrolling down, let it scroll out of view as normal */
  if (prevScrollpos <= currentScrollPos ){
      headerDiv.classList.remove("fixedToTop");
      headerDiv.style.top ="-7.2rem";
  }
  /* otherwise if we're scrolling up, fix the nav to the top */
  else{  
      headerDiv.classList.add("fixedToTop");
      headerDiv.style.top = "0";
  }

  prevScrollpos = currentScrollPos;
}

/*=============== SHOW MENU ===============*/
const showMenu = (toggleId, navId) =>{
   const toggle = document.getElementById(toggleId),
         nav = document.getElementById(navId)

   toggle.addEventListener('click', () =>{
       // Add show-menu class to nav menu
       nav.classList.toggle('show-menu')
       // Add show-icon to show and hide menu icon
       toggle.classList.toggle('show-icon')
   })
}

showMenu('menu-links','menu-links')
</script>



</body>
</html>	


{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  	font-family: "Montserrat", sans-serif;
  	font-weight: <900>;
  	font-style: normal;

}

nav{
	background-color: hsl(220deg 100% 80%);
	box-shadow: hsl(220deg 60% 50%);
	color: #ffffff;
	text-decoration: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 10%;
	border-bottom: 1px solid #000;
	transition: all 0.2s ease-in-out;
    z-index: 100;
}

nav ul li{
	color: #808080;
	list-style: none;
	display: inline-block;
	margin: 10px 20px;
	font-weight: 500;
	cursor: pointer;
}

nav img{
	width: 20%;
	height: 20%;
	position: relative;
	top: 0px;
	bottom: 20px;
	left: 5px;
	right: 300px;
	
}

.nav-btn{
	background: #000;
	color: #fff;
	font-size: 16px;
	padding: 15px 25px;
	border: 0;
	outline: 0;
	border-radius: 40px;
	cursor: pointer;
}
.nav-btn img{
	width: 12%;
	height: 12%;
	
	position: absolute;
	top: 100px;
	left: -10px;
}
.header{
	width: 100%;
	min-height: 100vh;
	background: linear-gradient(#c9d0ff 0%, #d3ecff 50%);
	padding: 0 10%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	overflow: hidden;
	background: #C04848;
	background: linear-gradient(#c9d0ff 0%, #d3ecff 50%), url("main.png");
	background-size: cover;
	background-repeat: no-repeat;
}

.header h1{
	margin-top: 100px;
	font-size: 3vw;
	line-height: 3.5vw;
	
}
  
.content { 
    height:1000px; 
}

nav.fixedToTop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/* add space for fixed header when it's fixed to top */
nav.fixedToTop + .content{
    margin-top:8rem;
}
.menu-icon{
	display: none;
}



/*<------------------------------- FOOTER ------------------------------>*/

footer
{
	position: relative;
	width: 100%
	height: auto;
	padding: 50px 100px;
	background: #ffffff; 
}
footer .container
{
	width: 100%;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;	
	grid-gap: 20px;

}

footer .container .sec h3
{
	position: relative;
	color: #333;
	font-weight: 600;
	margin-bottom: 15px;
	padding-bottom: 5px;

}

footer .container .sec p
{
	color: #555;
}
footer .container .sci
{
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(4,50px);
}
footer .container .sci li
{
	list-style: none;
	
}
footer .container .sci li a
{
	display: inline-block;
	width: 36px;
	height: 36px;
	background: #333;
	display: grid;
	align-content: center;
	justify-content: center;
	text-decoration: none;
}
footer .container .sci img
{
	color: #fff;
	
}
footer .container .quicklinks
{
	position: relative;
}
footer .container .quicklinks ul li
{
	list-style: none;
}
footer .container .quicklinks ul li a{
	color: #555;
	text-decoration: none;
	
	margin-bottom: 10px;
	display: inline-block;
}
footer .container .contact .info
{
	position: relative;

}
footer .container .contact .info li
{
	display: grid;
	margin-bottom: 16px;
}
footer .container .contact .info li span
{
	color: #555;
	
}
footer .container .contact .info li a
{
	color: #555;
	text-decoration: none;
}
.copyrightText
{
	width: 100%;
	background: #fff;
	padding: 20px 100px 30px;
	text-align: center;
	color: #555;
	border: 1px solid rgba(0,0,0,0.15);
}

@media (max-width: 991)
{
	footer
	{
		padding: 40px;
	}
	footer .container
	{
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 20px;
	}
	.copyrightText
	{
		padding: 20px 40px 30px;
	}
}
@media (max-width: 768px)
{
	footer .container
	{
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 20px;
	}
}
/*<------------------------------- END OF FOOTER ------------------------------>*/


/* ------------- Media Queries for navbar ---------- */

@media only screen and (max-width: 991px){
	nav ul{
		position: absolute;
		width: 100%;
		color: #0000ff;
		top: 2.5rem;
		left: 0%;
		right: 0;
		top: 100%;
		text-decoration: none;
		height: calc(100vh - 3.5rem);
		overflow: auto;
		pointer-events: none;
		opacity: 0;
		transition: top .4s, opacity .3s;
		padding-top: 1rem;
		padding: 1.25rem 1.5rem;
		display: inline-grid;
		justify-content: space-between;
		align-items: center;
		transition: background-color .3s;
	}
	.nav ul::-webkit-scrollbar{
		width: 0;
	}
	nav ul{
		background-color: #000000;
		font-weight: bold;

	}
	.nav ul:hover{
		background-color: ;
	}
	.show-menu{
		opacity: 1;
		top: 3.5rem;
		pointer-events: initial;
	}

	.menu-links{
		color: #fff;
	}
	.nav-btn{
		display: none;
	}
	nav.logo{
		width: 150px;
	}
	
	.menu-icon{
		display: block;
		width: 30px;
	}
	.show-menu{
		max-height: 300px;
	}
}
}
/*---------- Media Queries for header content --------------- */

@media only screen and (max-width: 991px){
	.header{
		min-height: auto;
		padding: 0;
	}
	.user-img{
		width: 100%;
		right: auto;
		position: relative;
		margin-top: 100px;
	}
}
2

Hi @krys98 ,
I’ve noticed that your first selector in your CSS has not been declared. You have the following:

{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  	font-family: "Montserrat", sans-serif;
  	font-weight: <900>;
  	font-style: normal;
}

But you forgot to add what the styles are for. Try adding it all the elements with asterisc ( * ), it makes it a bit better, though it does not solve the entire problem. I hope it helps a bit.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.