At my breakpoint of 1100px I have told CSS to remove a div which holds an image. However, the rest of the content does not move across and there is a large blank area (as if the div is still there). All I would like to happen is for the content to all shift over and fill the page. This error on occurs on this singular page and this specific to this very break point.
/*minimised browser winddow */
@media(max-width: 1100px) {
header #branding,
header nav,
header nav li,
#newsletter form,
aside#sidebar {
float: none;
text-align: center;
width: 100%;
}
aside {
display: none;
}
#newsletter h1 {
display: none;
}
}
/* 768 tablet */
@media(max-width: 768px) {
header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
width: 100%;
}
header {
padding-bottom: 20px;
}
#imagery {
display: none;
}
#showcase h1 {
font-size: 275%;
}
#showcase p {
font-size: 100%;
}
#newsletter button,
.quote button {
display: block;
width: 100%;
}
#newsletter form input[type="email"],
.quote input,
.quote textarea {
width: 100%;
margin-bottom: 5px;
}
.col-25,
.col-75 {
width: 100%;
margin-top: 0;
}
/* nav */
ul.topnav li {
display: none;
}
ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
/* 'un' float the list items so they return to displaying vertically */
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* 400 pixels mobile phone */
@media screen and (max-width: 480px) {
header #branding,
header nav,
header nav li {
text-align: center;
font-size: 100%
}
header ul {
padding: 10px;
font-size: 100%;
}<script src="https://use.fontawesome.com/3a2264e344.js"></script>
<script src="html9shiv.js"></script>
<link rel="shortcut icon" type="image/png" href="wrench.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="desciption" content="Darran Brady Plumbing">
<meta name="keywords" content="Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
<meta name="author" content="DB, Darran, Brady, Darran Brady">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav" id="myTopnav">
<li class="active"><a href="home9.html">Home</a></li>
<li><a href="about9.html">About</a></li>
<li><a href="services9.html">Services</a></li>
<li><a href="coverage9.html">Coverage</a></li>
<li><a href="contact9.html">Contact</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:140%;" onclick="myFunction()">☰</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="dark">
<div class="callus"><a href="tel:+07756848657"><i class="fa fa-phone fa-2x" ></i></a></div>
<h2>Our Story</h2>
</div>
</div>
<section id="main">
<div class="container">
<article id="main-col">
<p>
Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area.</p>
<div class="dark">
<h3>What We Offer</h3>
<ul>
<li>Plumbing and Heating Services</li>
<li>Gas Safe Registered: 202542</li>
<li>VAT Registered</li>
<li>25 years of expertise</li>
<li>Plumbing and Heating Services</li>
<li>Heating Engineer Qualified</li>
<li>VAT Registered</li>
<li>100% Satisfaction Garauntee</li>
</ul>
</article>
<aside id="sidebar">
<div class="dark">
<h3>Satisfaction Garauntee</h3>
<p>Reputation matters. 98% of our customer would reccomend us to a friend.</p>
<a href="http://www.checkatrade.com/DBPlumbing/Reviews.aspx"><img class="catsmall" src="cat.png" alt="checkatradelogo"></a>
</div>
</aside>
</div>
</section>
<footer>
<div>
<p>Darren Brady Plumbing Copyright © 2017</p>
<p>Registered in England No. 4364232</p>
</div>
</footer>
