Search code examples
htmlcssmedia-queriescss-tables

Media query has two different results for the footer on two different pages even though the codes the same?

I just finished the media queries for my home page. I did 3 of them, one for a max-width of 1024px one for a max-width of 724px and another for 425px. The problem I am having is with the 724px display(the tablet display) Once I finished the home page I started copying those media queries over to the about page because the nav and the footer is the same across the site. However the footer on the about page is jolting out -shown here:

about page

The code below is the home page and the fiddle link is the about page.

https://jsfiddle.net/xqkweov4/3/

body, html {
	margin: 0;
	padding: 0;
}

/*---HEADER---*/

li a {
	text-decoration-line: none;
	color: rgba(102,102,102,0.75);
}

header {
	background: blue;
	height: 100vh;
	background-attachment: fixed;
}

nav {
	background-color: white;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	box-shadow: 0px 0px 100px grey;
}

ul {
	margin-right: 30px;
	margin-top: 25px;
}

li {
	display: inline-block;
	font-size: 1.55rem;
	margin-right: 20px;
	font-family: 'Rajdhani';
}

li a:hover {
	cursor: pointer;
	color: #1a1a1a;
	transition: all 0.7s ease;
}

.after:after {
	position: relative;
	left: 12px;
	top: 2px;
	display: inline-block;
	content: "";
	width: 1px;
	height: 20px;
	background-color: rgba(102,102,102,0.25);
}

.logo {	color: red;
	font-size: 3.7rem;
	margin: 10px;
	opacity: 1;
	margin-left: 30px;
}

.phrase {
	text-align: center;
	position: relative;
	top: 300px;
}

.phrase p {
	color: white;
	font-size: 3.5rem;
	font-family: 'Arvo';
	margin-bottom: 30px;

}

.phrase a {
	background-color: red;
	border-radius: 25px;
	color: white;
	font-family: 'Bitter';
	font-size: 1.8rem;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-top: 10px;
}

.phrase a:hover {
	background-color: #cc2900;
	transition: all 0.2s ease;
	cursor: pointer;
}

.phrase .fas {
	display: block;
	color: white;
	font-size: 3.5rem;
	margin-top: 15px;
}

/*---PROMISE---*/

.stats {
	width: 100%;
	display: flex;
	box-shadow: 0px 0px 150px grey;
	position: relative;
	z-index: 1;
	background-color: white;
}

.stats div {
	display: inline-block;
	flex-basis: 35%;
	text-align: center;
	padding-bottom: 30px;
}

.stat-info {
	font-size: 2rem;
	color: rgba(102,102,102, 1);
	font-family: 'Rajdhani';
	margin-bottom: 0;
	margin-top: 10px;
}

.stat-num {
	color: red;
	font-family: 'Rajdhani';
	font-size: 3rem;
	margin: 0;
	font-weight: bolder;
}

.stats div:before {
	display: inline-block;
	content: '';
	width: 2px;
	height: 35px;
	background-color: rgba(102,102,102, 0.60);
}

.promise {
	width: 100%;
	background: blue;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}

.promise .wrapper {
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}

.promise h1 {
	position: relative;
	top: 40px;
	color: white;
	font-family: 'Arvo';
	font-size: 3.5rem;
	text-align: center;
	margin-top: 0;
	word-spacing: 7px;
	text-shadow: 0px 0px 100px grey;
}

.promise p {
	color: white;
	font-size: 1.8rem;
	font-family: 'Rajdhani';
	margin-bottom: 0;
	padding-bottom: 60px;
	text-align: center;
	margin-top: 40px;
	padding-left: 50px;
	padding-right: 50px;
}

/*---FOOTER---*/

.footer .wrapper {
	display: flex;
}

.footer div {
	display: inline-block;
	flex-basis: 33.33%;
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 1);
	margin-top: 5px;
}

.footer h1 {
	font-size: 2rem;
	margin-top: 15px;
}

.footer .inner {
	margin-left: 55px;
}

.social .inner {
	margin-left: 45px;
}

.contact .inner {
	margin-left: 35px;
}

.footer .inner:before {
	display: inline-block;
	content: '';
	width: 27.1%;
	height: 2px;
	background-color: rgba(102,102,102, 0.6);
	position: absolute;
	margin-top: 54px;
}


.links .inner:after {
	content: '';
	width: 10.5%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -151px;
}

.social .inner:after {
	content: '';
	width: 5.8%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -171px;
}

.contact .inner:after {
	content: '';
	width: 7.5%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -174.5px;
}

.wrap:before {
	content: '';
	width: 100px;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: 55px;
}

.links a {
	display: block;
	text-decoration-line: none;
	color: rgba(102,102,102, 1);
	font-size: 1.2rem;
	position: relative;
	top: -10px;
	transition: color 0.4s ease;
}

.links a:hover {
	color: red;
}

.contact p {
	position: relative;
	top: -10px;
}

.social i {
	font-size: 1.7rem;
	margin-right: 5px;
	position: relative;
	top: -20px;
	color: rgba(102,102,102, 0.7);
	transition: all 0.4s ease;
}

.social i:hover {
	color: red;
	cursor: pointer;
}

#msg {
	margin-top: -15px;
}

.footer-textarea {
	background-color: rgba(102,102,102, 0.2);
	outline: none;
	color: rgba(102,102,102, 1);
	resize: none;
	width: 100%;
}

.footer button {
	position: absolute;
	margin-left: 23.2%;
	margin-top: -40px;
	border: none;
	font-family: 'Rajdhani';
	font-size: 1.2rem;
	transition: all ease 0.4s;
	outline: none;
}

button:hover {
	cursor: pointer;
	color: red;
}

.dark {
	color: red;
}

.copyright {
	position: absolute;
	background-color: white;
	text-align: center;
	width: 100%;
	margin-bottom: 0;
	font-size: 1.2rem;
	padding-bottom: 4px;
}



/*-------MEDIA QUERIES-------*/



@media screen and (max-width: 1024px) {
	
	/*---FOOTER---*/
	
	.footer .inner {
		margin-left: 30px;
	}

	.footer-textarea {
		width: 88%;
	}

	.footer button {
		margin-left: 22.25%;
	}

	.social .inner:after {
		width: 7.8%;
		margin-top: -80px;
		left: 36.25%;
	}

	.links .inner:after {
		width: 14%;
	}

	.contact .inner:after {
		width: 10%;
	}

}



@media screen and (max-width: 768px) {

	/*---FOOTER---*/

	.contact .inner:after {
		margin-top: -195px;
	}

	.social .inner:after {
		left: 37.25%;
	}

	.footer button {
		margin-left: 20%;
	}
}



@media screen and (max-width: 425px) {

	/*---NAV---*/

	.logo {
		font-size: 2.5rem;
		margin-left: 10px;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	nav li {
		display: none;
	}

	.ham-menu {
		width: 55px;
		height: 55px;
		position: fixed;
		right: 0;
		top: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.m1, .m2, .m3 {
		border-radius: 4px;
		margin: 4px;
		width: 40px;
		height: 5px;
		background-color: red;
		float: left;
	}

	/*---MAIN---*/

	header {
		height: 50vh;
	}

	.phrase {
		top: 175px;
	}

	.phrase p {
		font-size: 1.7rem;
		margin-bottom: 10px;
	}

	.phrase a {
		font-size: 1.3rem;
		padding: 7px;
	}

	.phrase .fas {
		margin-top: 10px;
		font-size: 2.5rem;
	}

	.stats p {
		font-size: 1.3rem;
	}

	.stats div {
		padding-bottom: 10px;
	}

	.stats div:before {
		height: 20px;
	}

	.promise h1 {
		font-size: 2rem;
	}

	.promise p {
		position: relative;
		top: 10px;
		font-size: 1.3rem;
	}

	/*---FOOTER---*/

	.footer .wrapper {
		display: flex;
		flex-direction: column;
	}

	.footer div {
		margin: 0;
	}

	.footer h1 {
		font-size: 2rem;
		margin-top: 10px;
	}

	.footer .inner {
		margin: 0;
	}

	.footer .inner:before {
		display: inline-block;
		content: '';
		width: 90%;
		height: 2px;
		background-color: rgba(102,102,102, 0.6);
		position: absolute;
		margin-top: 48px;
	}

	.links .inner:after {
		width: 33%;
		margin-top: -152px;
	}

	.social .inner {
		position: relative;
		top: -9.5px;
	}

	.social .inner:after {
		content: '';
		width: 18%;
		height: 2px;
		background-color: red;
		position: absolute;
		left: 0;
		margin-top: -43.75px;
	}

	.contact .inner:after {
		content: '';
		width: 24%;
		height: 2px;
		background-color: red;
		position: absolute;
		margin-top: -148px;
	}

	.links a {
		margin-left: 5px;
	}

	.social h1 {
		margin-bottom: 10px;
	}

	#msg {
		font-size: 1rem;
		margin-bottom: 0;
		margin-right: 25.5%;
		position: absolute;
		right: 5px;
		top: 80px;
	}

	.footer button {
		right: 9.25%;
		margin-top: 0.2px;
	}

	.social i {
		font-size: 1.8rem;
		margin-right: 2px;
		position: relative;
		top: -5px;
		left: 5px;
		color: rgba(102,102,102, 0.7);
		transition: all 0.4s ease;
	}

	.footer-textarea {
		width: 88.5%;
		margin-left: 5px;
	}

	.contact p {
		margin: 5px;
		font-size: 1.2rem;
	}

	.copyright {
		background-color: red;
	}

	.copyright span {
		color: white;
		background-color: red;
	}

}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, intitial-scale=1.0">
	<title>Kane Concrete & Construction LLC</title>
	<link rel="stylesheet" href="../css/style.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
	<div class="inner-wrap">
		<header>
			<nav>
				<div class="logo">
					<i class="fab fa-accusoft"></i>
				</div>

				<div class="nav">
					<div class="ham-menu">
						<div class="m1"></div>
						<div class="m2"></div>
						<div class="m3"></div>
					</div>
					<ul>
						<li class="after"><a href="index.html">Home</a></li>
						<li class="after"><a href="about.html">About</a></li>
						<li class="after"><a href="about.html#services">Services</a></li>
						<li class="after"><a href="careers.html">Careers</a></li>
						<li class="after"><a href="#">Gallery</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</div>
			</nav>
			
			<div class="phrase">
				<p>It all starts at the foundation.</p>
				<a>Get a Quote</a>
				<i class="fas fa-angle-down"></i>
			</div>	
		</header>

		<section class="stats">
			<div id="start-year">
				<p class="stat-info">Established</p><br>
				<p class="stat-num">2015</p>
			</div>

			<div id="projects">
				<p class="stat-info">Projects</p><br>
				<p class="stat-num">200+</p>
			</div>

			<div id="claims">
				<p class="stat-info">Insurance claims</p><br>
				<p class="stat-num">87%</p>
			</div>
		</section>

		<section class="promise">
			<div class="wrapper">
				<h1>Our Promise</h1>

				<p><span style="color: red;">W</span>e believe that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum doloremque impedit laudantium magnam eos quae ipsum, rem, dolorum saepe laboriosam ipsam nobis architecto debitis, vel aut provident tenetur perferendis, aliquid commodi magni sequi hic quia nemo! Nam odio fugiat, similique eum saepe. Laboriosam officiis delectus reiciendis, est tenetur voluptates ducimus! Ducimus enim dolor, eos id porro, amet culpa alias sunt reprehenderit necessitatibus deserunt eum. Sunt quia accusamus facilis quo, cum maiores nam illum sit quisquam, tempora fugit? Quod voluptate debitis voluptatum illo. Est, rerum sequi. Corporis atque incidunt placeat aliquam error veniam quis, minus voluptatem, qui, a pariatur voluptatibus, ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe labore aliquid magnam velit, nisi consequuntur!</p>
			</div>
		</section>
	</div>

	<section class="footer">
		<div class="wrapper">
			<div class="links">
				<div class="inner">
					<h1>Quick Links</h1>

					<a href="#">Home</a>
					<a href="#">About</a>
					<a href="#">Services</a>
					<a href="#">Job Openings</a>
					<a href="#">Gallery</a>
				</div>
			</div>

			<div class="social">
				<div class="inner">
					<h1>Social</h1>

					<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
					<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
					<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>

					<p id="msg">Send some feedback!</p>
					<button name="msg">Send</button>
					<textarea name="msg" class="footer-textarea" cols="46" rows="5" placeholder="type here..."></textarea>
				</div>
			</div>

			<div class="contact">
				<div class="inner" class="wrap">
					<h1>Contact</h1>

					<p>(208)546-7827 - <span class="dark">Matt</span></p>
					<p>(208)546-7827 - <span class="dark">Keegan</span></p>
					<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
					<p><span class="dark">Email</span> - [email protected]</p>
				</div>
			</div>
		</div>
		
		<div class="copyright"><span>&copy; 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
	</section>
</body>
</html>

Solution

  • Looks like the issue is caused by a difference in your CSS. In the example you provided in a jsfiddle .footer .inner:before has a width of 360px. In the code above the same pseudo element has a width of 90%. Unfortunately simply fixing this wont sort the issue because you seem to be applying a whole host of different CSS to the relevant page. If you apply a media query to a page with different CSS you wont always get the same effects. The issue on your about page seem to stretch beyond just tablet for me.

    You might be better served by using one stylesheet for the whole site so you dont need to copy things over to each page every time. Many sites have only one core stylesheet, although that is often compiled from smaller modular stylesheets.

    A quick fix is to add the following CSS:

    html,
body {
  overflow-x: hidden;
}

    This just hides the overflow issue and doesnt actually fix the underlying issue however I dont want to dive too deep into your CSS as this is an issue that should be sorted by creating some consistent footer CSS.